[TypeScript] React + TypeScript

💻 React에서 TypeScript 시작하기

• 이미 만들어져있는 react프로젝트에 설치할때

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

• React프로젝트를 새로 만들때
  npx create-react-app my-app --template typescript

🖤 초기 파일구조

✔ 컴포넌트 파일은 js가 아니라 tsx로 확장자를 사용해야한다.

일반 리액트와 크게 다른 점은 없지만 함수, 컴포넌트, state, props타입체크를 잘 해줘야 에러가 나지 않는다.

🖤 React에서 TS문법 사용

1. 일반 변수, 함수 타입지정

   • 기존타입스크립트 그대로

2. JSX 타입지정
   - 리액트에선 변수나 자료에 <div></div>같은 JSX요소를 담아서 쓸수있다.

   • JSX요소에 타입지정하려면 JSX.Element라는 타입을 쓰면된다.

   let box :JSX.Element = <div></div>
    let btn :JSX.Element = <button></button>

3. function component 타입지정

   • react의 컴포넌트

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

   함수형태이므로 타입을 지정해주려면 파라미터와 return타입지정하면 된다.

   • 컴포넌트 타입지정

   type AppProps = {
       name: string;
   }
   function App(props:AppProps) :JSX.Element{
       return (
         <div>안녕하세욥 {props.name}</div>
       );
   }

   • props로 JSX를 입력할 수 있게 코드짤 때

   type ContainerProps = {
     a: JSX.IntrinsicElements['h4'];
   }; 
   
   function Container (props: ContainerProps) {
     return (
       <div>{props.a}</div>
     )
   }

a라는 props자리에 <h4>만 넣을 수 있게 타입쉴드를 씌워놓음
❗ 리액트 18버전이후로 JSX.IntrinsicElements는 props타입 넣을때만 사용가능

4. state 문법 사용시 타입지정

       // 타입이 알아서 지정
       const [user, setUser] = useState("kim");

   state를 만들땐 자동으로 타입이 할당된다.
   Generic문법을 사용하여 타입을 useState에 지정해줘도됨

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

5. type assertion 문법 사용할 때

let code: any = 123;
let employeeCode = <number> code; // X

✔ 리액트에서는 꺾쇠대신 as문법을 사용한다.