Flux란?
Flux는 단방향 데이터 흐름을 활용한 리액트용 애플리케이션 아키텍처이다. 리액트에서 복잡한 상태 관리를 해결하기 위해서 고안된 개념이다. 기본적인 구조를 살펴보면 다음과 같다.
- View에서 Action이 발생한다.
- 발생한 Action을 Dispatcher가 받아서 Store로 전달한다.
- Store는 전달받은 Action을 바탕으로 상태를 변경하고 이를 View에 반영한다.
- View에서 다시 Action이 발생하면 동일한 과정을 반복한다.
이와 같이 view -> action -> dispatcher -> store -> view 방향으로 데이터가 흐르기 때문에 단방향 데이터 흐름이라고 부른다.
❓❓❓❓ 만약 단방향이 아니라면..?
규모가 커질수록 관리가 매우매우매우 복잡해질 것이다. (데이터의 흐름을 추적하기 어려워지고 어디서 상태가 변경됐는지 찾는 것이 매우 고될 것이다..)
Redux란?
Redux는 추상적인 Flux 패턴을 직접 구현한 라이브러리이다. 위에서 살펴본 Flux와 비슷하지만 약간의 차이점이 있다.
전체적인 흐름은 Flux와 거의 동일하다.
- 컴포넌트(뷰)에서 액션이 발생하면 dispatch를 통해 Reducer로 전달한다. (이 때 액션 객체는 type을 필수로 가져야 한다.)
- Reducer는 액션을 받아 상태를 업데이트하고 이를 Store에 저장한다.
- 컴포넌트에서 스토어를 구독하고 있기 때문에 상태가 변화하면 자동으로 컴포넌트가 리렌더링된다.
Redux의 차별점은 Reducer가 상태를 직접 관리한다는 점이다. Reducer는 상태를 관리하고 Store는 단지 상태를 보관하는 역할을 한다.
액션을 Reducer로 바로 전달하기 때문에 dispatcher가 필요없어져 사라졌다.
📌 dispatch와 dispatcher의 차이!
•dispatch: Redux에서 액션을 리듀서로 보내는 함수
•dispatcher: Flux에서 액션을 받아 필요한 Store로 전달하는 중앙 허브 역할의 객체
Reducer란?
Reducer는 상태 업데이트 로직을 관리하는 함수이다. 현재 상태(state)와 액션 객체(action)을 받아 작성한 로직을 수행한 후 새로운 상태를 반환한다.
이때 기존 상태를 직접 변경하지 않고 새로운 객체를 반환하여 불변성을 유지한다!!
Redux의 3가지 원칙
- Single Source of Truth(SSOT): 모든 상태는 단일 스토어에 저장된다.
- 상태는 Read-Only이기 때문에 액션을 통해서만 변경할 수 있다.
- 상태 변화는 순수 함수인 리듀서를 통해서만 이루어져야 한다.
Redux는 매우매우 효율적으로 보이지만 작성해야 하는 코드의 길이가 길어서 진입장벽이 높다. 그래서 이를 해결하기 위해 Redux ToolKit(RTK)가 등장했다!! RTK를 사용하면 더 간결한 코드로 상태 관리를 할 수 있다.
