최상단 컴포넌트의 state를 말단 컴포넌트까지 전달하고 싶으면 이렇게 반복적인 작업을 해야함.
→ 이러한 불편함을 해소하기 위해 Redux 사용!!
★ Redux가 없는 컴포넌트들은 그냥 props로 유선 연결되어있는 거라고 생각하면 됨. Redux는 블루투스 느낌!
★ Redux는 독립적인 도구!! 이 독립적인 Redux와, 또 하나의 독립적인 도구인 React를 서로 연결해주는 게 ‘React Redux’라는 도구!
★ 로컬 컴퓨터에서 설치하려면 : npm install redux react-redux
★ redux를 사용하려면 : import { createStore } from ‘redux’;
※ store를 생성할 때 반드시 주입해줘야 하는 게 reducer!! reducer의 역할은, store 안의 state를 어떻게 바꿀 것인가!를 결정하므로 파라미터가 2개! currentState, action(어떻게 바꿀 것인지에 대한 요청을 받음) reducer가 return한 값은 새로운 state가 됨!
※ redux는 각각의 state의 변화를 불변하게 유지해야함! 그럴려면, 새로운 state를 만들어야하는데, 이는 과거의 state를 복제한 것임.
♥ React Redux의 4인방 / React Redux가 제공하는 기능들
① Provider : 컴포넌트. state를 어떤 컴포넌트들에게 제공할 것인가에 대한 가장 바깥쪽의 울타리를 정의하는 것. Provider의 props 중에서 store라는 props를 반드시 정의해줘야 쓸 수 있음.
② useSelector : 어떤 state 값을 쓰고 싶은지를 선택. 함수를 인자로 받음.
③ useDispatch : state 값을 변경
④ connect : 사용하기 어렵고 재사용성이 필요할 때 쓴다.
★ Redux를 통해 React의 생산성을 높일 수 있다!
학습한 강의 : https://www.youtube.com/watch?v=yjuwpf7VH74
'개발냥발 > FE (FrontEnd)👩🏻💻' 카테고리의 다른 글
Zustand 상태 관리 라이브러리에 대해 알아보좌. (0) | 2024.05.27 |
---|---|
React Query의 suspense와 error boundary 활용하기 (feat. Next.js의 App router) (0) | 2024.05.21 |
Typescript 익히기❗ (0) | 2022.06.13 |
React 익히고 활용하기❗ (0) | 2022.06.09 |
React 익히기❗ (0) | 2022.05.30 |