Redux(리덕스)란
JavaScript(자바스트립트) 상태관리 라이브러리이다.
상세히 말하자면 state 접근과 제어를 가능하게 하는 '중앙 state 관리소'를 사용할 수 있게 도와주는 패키지(라이브러리)이다.
Global State를 의미하며 그것을 관리하게 도와주는 라이브러리(패키지)이기 때문에 프론트엔드 개발자들은 리덕스를 전역상태관리 라이브러리라고 많이 표현한다.
-
Local state(지역상태)
컴포넌트에서 useState를 이용해서 생성한 state -
Global state(전역상태)
컴포넌트에서 생성x, 중앙 state 관리소라고 생각하면 됨
어디서든 접근 가능
Redux를 사용하는 이유🤔
useState의 불편함
Component 간에 정보 공유 할 때,
자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다.
자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 그저 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. 이때 Props drilling 이슈가 발생했다 한다.
- prop-drilling: 부모컴포넌트에서 하위로 state를 내려줄 때 중간에 그냥 거쳐가기만 하는 컴포넌트들이 있다.
예)1 → 4 위해서는 1→2→3→4의 과정을 거쳐야함. 다이렉트로 전달되지 않는다.
Redux는 중앙data 관리소 역할을 한다. 그래서 state를 공유하지 않아도(props를 내려주지 않아도=component를 거치지 않아도) 사용 가능해진다.
이때 모든 데이터가 중앙 state 관리소에 접근 가능하다.
📑Redux 기본 개념
-
동일한 데이터는 스토어라는 하나뿐인 데이터 공간에서 가지고 온다.
-
state는 읽기 전용이다.
리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다. -
변경은 순수함수로만 가능하다.
Store(스토어) – Action(액션) – Reducer(리듀서)
-
Store
상태가 관리되는 오직 하나의 공간
컴포넌트와는 별개의 공간으로 스토어 안에 앱에서 필요한 상태를 담는다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다. -
Action
앱에서 스토어에 운반할 데이터
자바스크립트 객체 형식으로 되어있다. -
Reducer
Action은 reducer에 전달되고 action의 type에 따라 state를 변경하는 함수이다.
Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.
쉽게 말해 state 변경 요청이 들어오면 디스패치가 이 요청을 어떻게 해달라고 action(요청)을 store로 던지고 store는 액션객체의 type에 따라 state를 변경한다.
*다시 정리
Action(액션) 객체가 dispatch() 메소드에 전달된다.
dispatch(액션)를 통해 Reducer를 호출한다.
Reducer는 action을 들고 Store를 방문한다.
Redux의 장점
- 순수함수를 사용하기 때문 상태를 예측 가능하게 만든다.
- 유지보수하기 좋다. (복잡한 상태 관리와 비교)
- action과 state log 기록 시 디버깅에 유리하다.
- 테스팅이 용이하다
참고자료
Redux(리덕스)란? (상태 관리 라이브러리)
항해99 React 숙련 주차 강의
