JSX에 대해 살펴보고 VScode를 사용하여 JSX를 최대한 활용하고 어떤 타입이 예상되는지 이해하는 방법을 알아봅시다.

export const Component = () => {
  return (
    <div
      // How do I figure out what type aria-posinset expects?
      aria-posinset={}
      // How do I figure out what type onChange expects?
      onChange={}

      // How do I get autocomplete with JSX?
    />
  );
};

Three Challenges

세가지 미션이 있습니다.

• aria-posinet 이 어떤 타입을 취하는지 알아낼 수 있나요?
• onChange 가 예상하는 타입을 알아낼 수 있나요?
• JSX에서 div가 기대하는 prop에 대한 자동완성을 어떻게 얻을 수 있나요?

Three Helpful Tools for Writing JSX

Finding the aria-posinset Types

첫 번째 과제의 해결책은 aria-posinset 프로퍼티 위로 마우스를 가져가면 됩니다.

프로퍼티가 number or undefined 를 알려줍니다.

다음으로 onChange에 마우스를 올리면 타입이 보입니다.

React.DOMAttributes<HTMLDivElement>.onChange?:React.FormEventHandler<HTMLDivElement> | undefined

React는 여기에 많은 자체 타입을 번들로 묶어 무엇을 할 수 있는지 설명합니다.

onChange에서 본 것을 기반으로 예제 타입을 만들어보겠습니다.

type Example = React.FormEventHandler<HTMLDivElement> | undefined