[TS] 리액트 + 타입스크립트 + Redux

📌  프로젝트 생성

npx create-react-app 프로젝트명 --template typescript

App.tsx로 파일이 생성되면 성공!

 

📌  간단한 Counter 만들기

💡 useState를 사용할 때는 알아서 타입을 유추해주기 때문에 생략해도 상관없지만, 상태가 null일 수도 있고 아닐 수도 있을 때는 사용해주는 게 좋다.

 

📌  Form 형식 구현하기

💡 e 타입을 모를 땐 onChange 같이 props에 마우스를 올리면 알 수 있다.

 

📌  Redux + TypeScript로 Counter 구현하기

1. redux 설치

npm install redux react-redux @types/react-redux

💡 @types : 라이브러리에 타입스크립트 지원을 할 수 있도록 추가된 써드파티 라이브러리

 

2. counter 모듈 생성

src/modules/counter.ts

 

3. 프로젝트에 리덕스 적용하기

src/modules/index.ts

 

src/components/Counter.tsx

 

src/components/CounterContainer.tsx