타입스크립트를 이용하여 TODO 만들기

npx create-react-app my-app --template typescript

or

yarn create react-app my-app --template typescript

react 로만 만든 TODO를 타입스크립트로 재구현

---

Redux

Redux 소개

• 어플리케이션이 커지면 하위 컴포넌트가 많아지고, 데이터 전달을 위해 많은 컴포넌트를 거치게 됨 (Prop Drilling)
• Redux 는 Prop Drilling 을 해결하기 위해서 사용하는 라이브러리
  자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
• Context API 와 다른 점
  Context API: React 내장 API
  Redux: Third Party 라이브러리 / 미들웨어 기능 및 성능 최적화 제공
• 세가지 원칙
  하나의 저장소에 데이터가 기록된다.
  상태는 읽기 전용이다.
  변화는 순수 함수로 작성되어야한다.
• TODO 프로젝트를 Redux 로 리펙토링

yarn add redux react-redux

• reducer 를 이용하기 위해서는 useDispatch, 값을 보여주기 위해서는 useSelector 의 react-redux 내장 함수를 사용할 수 있다.
• redux-logger
  상태가 변경될 때 console 에 로그를 찍어주는 middleware 라이브러리
• redux-devtools-extension
  리덕스의 상태를 쉽게 보고 추적할 수 있는 라이브러리
• redux-persist
  상태가 localStorage 나 sessionStorage 를 통해 남아있을 수 있도록 하는 middleware 라이브러리

---

회고

타입스크립트와 리액트는 현 시점에서 조금 더 기초적인 부분부터 시작해야 할 것 같다..