[TIL][React] Redux를 사용해서 To Do List 만들기 01

설치한 패키지

• styled-components

npm install styled-components 

• redux, react-redux

npm install redux
npm install react-redux

• react-router-dom

npm install react-router-dom

• uuid

  npm install uuid

  // js import
  import {v4 as uuidv4} from 'uuid';

---

기본 세팅

• src 폴더 안에 생성

  • redux > components(components 파일들), config(state의 중앙관리소), modules(state들)
  • shared > Router.js(페이지들을 연결 해주는 역할)
  • pages > 각 pages.jsx

• Router.js 설정

  • Router 생성, export Router
  • BrowserRouter > Routes > Route(path(url), element(page컴포넌트) 속성)

• configStore.js

  • combineReducers
  • createStore
  • export store

• todos.js (module)

  • action 상수로 선언
  • action creator
  • initial state 설정
  • reducer
  • export reducer
  • configStore.js에 combineReducers 인자(?)의 객체안에 넣어줌

• index.js

  • render안에 Provider에 props로 store를 넣어서 App 컴포넌트를 감싸줌
  • import 항상 잊지말기

• App.jsx

  • return <Router />

하나하나 이해하기 보단 어떻게 돌아가는지 큰 흐름을 먼저 알면 금방 적응될 것 같다. 아마도

---