내배캠 4기 React - TIL
221222 TIL
찌우닝
2022. 12. 23. 11:16
Redux vs ReduxToolkit
1. store 안에는 state와 이를 관리하는 action이 있다
- action : type, payload
- 객체로 구성 { type: '', payload:'',}
2. provider : App.jsx에 store를 제공해주겠다.
3. 툴킷에서는 슬라이스에서 리듀서를 반환하고, 리덕스에서는 모듈에서 리듀서를 반환한다
4. 리덕스에서는 리듀서를 만들어서 직접 export, 툴킷에서는 슬라이스를 만들고 슬라이스에서 리듀서를 뽑아서 export함
5. slice는 reducer를 포함한 친구
CRUD & API
GET - Read
POST - Create
PATCH - Update
DELETE - Delete
useSelector
- Redux store 관련 Hook
- store의 state값을 반환해주는 역할
- useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우(어떠한 액션이 실행되어 상태값이 변경)
바뀐 스토어의 상태값을 다시 가져와서 컴포넌트를 렌더링 시킴. - useSelector 매개변수에 state => state.모듈명
const todos = useSelector((state) => state.todos);
useParams
- React Hook
- 현재 url에서 Route의 pathname과 일치하는 key, value 형식의 객체를 반환해주는 역할