Redux 익히기❗

최상단 컴포넌트의 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