Redux: props로 state를 옮기고 또 옮기고 또 옮기지 않는 방법

Redux 🌐

---

Redux는 상태관리 라이브러리이다. 보통 React 관련 라이브러리라고 오해한다고 하는데 Redux는 React 없이도 사용할 수 있다.

React에서 state와 props를 이용하여 CDD 개발을 할 수 있지만 애플리케이션의 규모가 커지고 복잡해질수록 state와 컴포넌트를 분리할 필요성이 커지게 된다.

without Redux

---

어떤 state를 공동으로 사용하는 컴포넌트가 있다면 그 state의 위치는 공동으로 사용되는 컴포넌트를 포함하는 최상위 컴포넌트에 위치시켜야 한다.

하지만 그 컴포넌트들의 위치가 멀리 떨어져 있다면 상태 끌어올리기나 props 내려주기가 불필요하게 여러번 발생할 수 있다(ex. props drilling).
(맨 위에 아저씨가 춤추는 것 처럼 무한한 props 전달 지옥)

데이터의 흐름이 복잡해질 뿐 아니라 컴포넌트의 구조가 변경됐을 때 데이터의 흐름을 전부 뜯어고쳐야 할 수 있다.

with Redux

---

Redux를 사용한다면 전역 상태를 관리할 수 있는 저장소, Store를 통해 이 문제를 해결할 수 있다.

Redux 흐름은 다음과 같은 Flux 패턴에 따라 이루어진다.

1. UI에서 상태를 변경해야 하는 이벤트가 발생
2. 변경될 상태에 대한 정보가 담긴 Action 객체 생성
3. Action객체가 Dispatch 함수의 인자로 전달
4. Dispatch가 Action을 Reducer 함수로 전달
5. Reducer에서 Action의 객체 값에 따라 전역상태 저장소 Store의 상태를 변경
6. 변경된 상태를 UI에 렌더링

즉 아래와 같이 흐르게 되는 것이다.

🌬 UI ➡ Action ➡ Dispatch ➡ Reducer ➡ Store ➡ UI 💨

각자의 역할을 간단히 적어보면 다음과 같다.

• Action: state를 어떻게 변경할지 정의 해놓은 객체
• Dispatch: Action 객체를 Reducer로 전달해주는 메서드
• Reducer: 새로운 state를 만드는 순수함수
• Store: 상태가 관리되는 오직 하나뿐인 저장소

참고

---

https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow