타입스크립트 + 리액트(TS + React) 세팅 방법

타입스크립트+리액트의 셋팅방법은 총 3가지가 있다.

1번 빌드도구(ex. vite) 사용
2번 수동적 방법
3번 보일러플레이트 (반자동)의 방법으로 세팅

1번 각각의 빌드도구의 세팅방법은 각각마다 다르니
2번, 3번에 대해 설명하겠다!

수동적인 방법 세팅

• react 설치 및 실행
• React 타입을 TS 변환

npx create-react-app .
npm i @types/node typescript @types/react @types/react-dom
tsc --init

자세한 빌드 세팅은 여기서!

반자동의 방법으로 세팅하는 것

npx create-react-app . --template typescript

npx create-react-app . --template=typescript

둘중에 하나만 하면 끝!
위에 방법에서 하나씩 설정해주다가 이런 편리한 방법을 찾다니...

---

함께 자주 쓰는 컴포넌트 설치 npm 경로들

스타일 컴포넌트

npm i styled-components
npm i @types/styled-components -D

npm i styled-components @types/styled-components -D

리액트 라우터 돔

npm i react-router-dom

npm i @types/react-router-dom -D : 있었는데 24년초에 6이 나오면서 자동 타입정의가 가능

react query (리액트 쿼리)

npm i @tanstack/react-query

recoil

npm i recoil

React Hook Form

npm i react-hook-form