React + TypeScript 타입지정

---

JSX 타입지정

let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>

리액트는 변수나 자료에 <태그>를 담아서 사용할 수 있다.

=> <div></div>는 일반적인 HTML이 아닌 JSX문법이기 때문.

이때 타입지정을 추가로 하고 싶다면

변수명 : JSX.Element 타입을 사용할 것.

---

function 컴포넌트 타입지정

function App(){

  return (
    <div>
      <Profile name="철수" age="20"></Profile>
    </div>
  );
}

function Profile(props:{name:string, age:string}) :JSX.Element{
  return(
    <div>{props.name}입니다.</div>
  )
}

1. 리액트 키워드인 props에 파라미터 타입지정을 할 수 있고,

2. 리턴 타입의 경우 :JSX.Element를 사용하면 된다.

=> 생략해도 자동으로 타입지정이 됨.

---

props 태그 지정

type ContainerProps = {
  a: JSX.IntrinsicElements['h4'];
}; 

function Container (props: ContainerProps) {
  return (
    <div>{props.a}</div>
  )
}

JSX.IntrinsicElements를 사용하여 태그를 지정할 수 있다.

=> props.a는 <h4> 태그만 사용 가능

 

JSX.IntrinsicElements

=> 리액트 18버전부터 props 타입만 사용가능

---

useState 타입지정

const [user, setUser] = useState<string | null>('hong');

일반적으로 state는 자동 타입 할당이 되지만, 

타입이 변할 경우를 대비해서,

<T> Generic 문법을 이용하여 state 타입을 지정할 수 있다.

---

배웠던 타입스크립트 문법들을 리액트에 적용하자니 갑자기 기억이 잘 나지 않는다.. 흑

사실상 props 같은 곳에 타입을 정하기만 해도 얼추 "나 타입스크립트 할 줄 알아!" 정도 흉내는 낼 수 있지 않을까?