React에서 TS 사용하기

사실 프론트엔드 개발자를 꿈꾸고 있는 입장에서 React라는 툴은 거의 필수라고 할 수 있다.
지금 TypeScript를 공부하는 이유 또한
React에서 쓰기 위함이라고 해도 무방하다.

그래서 이번에는 React에서 TypeScript를 사용하는 방법을 알아보도록 하겠다.

1. JSX 타입지정

리액트에서는 태그하나하나가 HTML이 아니라 JSX라고 부르는 자료가 된다.
고로 이런 자료들의 타입을 지정하고 싶으면 JSX.Element를 쓰면 된다.

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

2. function component

function App(){
  return (
    <div>안녕하세요</div>
    )
}

리액트에서는 이렇게 컴포넌트를 만든다.
컴포넌트도 함수이기에 파라미터와 return 타입지정하면 된다.

function AppProps = {
  name : string;
};

function App (props : AppProps) : JSX.Element {
  return (
    <div>{message}</div>
    )
}

props 파라미터는 생김새에 맞게 타입지정하면되고
return 타입으로는 JSX.Element를 써주면 된다.

3. state 문법 사용 시

사실 state 만들 때는 자동으로 타입이 할당되어서 걱정할 필요는 없다.
하지만 state의 타입이 변경될 때를 대비해..

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

앞서 배웠던 Generic문법을 이용하면 된다.

4. type assertion 문법 사용 시

let code : any = 123; // 가능
let employeeCode = <number> code; //불가능

assertion 하고 싶으면 as 또는 <> 를 쓰면 되는데
react에서는 <>는 컴포넌트로 오해받기 때문에
as 키워드만 쓴다.

이렇게 대략적인 React에서 TypeScript을 쓴는 방법들을 알아보았는데, 앞으로 React에서도 TypeScript를 사용하는 습관을 기르도록 노력해야겠다.