일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- .env
- LV. 2
- commitlint
- React
- React Router dom v6
- leetcode
- engines locking
- Sanity.io
- eslintrc
- tailwindcss
- Biweekly Contest 79
- Medium
- 모던 자바스크립트 Deep Dive
- React Public Routes
- Weekly Contest
- javascript
- BFS
- Vite
- 모던 자바스크립티 Deep Dive
- next-auth
- 호이스팅
- react-dom
- next.js
- React.memo
- 프로그래머스
- 컴포넌트 최적화
- toast-ui-editor
- sql
- medinum
- React Private Routes
- Today
- Total
뚜벅
react 에서 redux 사용해보기! (1) 본문
이번 팀 프로젝트에서 redux을 사용할 일이 있어 공부도 할 겸 정리해봅니다!
우선 redux를 사용하기 위해 알아야 할 4가지 개념을 간단하게 정리해보면
1. redux
복잡한 상태를 관리하는데 도움이 되는 상태 관리 도구이며 예측이 가능하다.
중앙 데이터 저장소 (CDN)를 통해 전체 데이터 저장소를 한 곳에서 관리할 수 있다.
2. reducers
상태를 관리하고 새롭게 업데이트된 상태를 반환해준다.
3. actions
actions는 type, payload 두 가지 속성을 가지며
type는 고유 식별자
payload는 디스패치에 대한 데이터가 포함되어 있다.
4. dispatch
데이터 업데이트 actions를 보내는 데 사용된다.
Redux 사용
1. react에서 redux를 사용하기 위해 먼저 필요한 라이브러리를 설치해주어야 한다.
npm install redux react-redux
2. store , reducers 생성
reducers에서 state를 리턴해줘야 한다.
3. store에 접근할 수 있게 index 파일에서 Provider로 감싸준다.
4. useSelector를 사용하여 store에서 특정 state를 가져온다.
store 상태 업데이트
dispatch를 통해 actions를 전달해주면
reducer에서 action type에 따라 상태를 업데이트해줄 수 있다.
1. useDispatch 사용
아래 사진과 같이 useDispatch를 통해 dispatch를 선언한 뒤
원하는 이벤트에 dispatch를 통해 type, payload (업데이트할 데이터)를 전달해준다.
2. reducer에서 현재 전달받은 action을 처리할 수 있는지 판단한 뒤 처리한다.
처리할 수 없다면 기존 state를 리턴해준다.
주의 사항으로 reducer에서는 동기 함수만 사용해줘야 하며,
어떤 사이드 이펙트도 수행되면 안 된다.
원래 상태를 변경하면 안 된다.
redux에 대한 완전 기초만 정리해봤는데... 재밌었습니다.!
이제 toolkit!! 많이 들어본 친구인데 바로 공부해봐야겠습니다..!!
참조 자료
https://www.youtube.com/watch?v=zrs7u6bdbUw
'React' 카테고리의 다른 글
Pomodoro - TS, React, Tailwind CSS (0) | 2023.01.02 |
---|---|
외부 클릭 이벤트 - React (0) | 2022.10.05 |
Netlify 배포 에러 해결 - React Router Dom (0) | 2022.09.02 |
Toast ui editor - Failed to parse source map (0) | 2022.08.30 |
Toast ui editor 리액트 버전 에러 (0) | 2022.08.30 |