Flux 패턴이란? (feat. Redux)

Redux 라는 전역 상태 관리 라이브러리는 flux 패턴을 기반으로 만들어졌다.
그렇다면 flux 패턴이란 무엇일까?

Flux 패턴이란?

Flux는 Facebook에서 애플리케이션의 데이터 흐름을 관리하기 위해 고안한 단방향 데이터 흐름(One-way Data Flow) 아키텍처 패턴이다.
MVC 패턴에서 발생할 수 있는 복잡한 데이터 흐름 문제를 해결하기 위해 설계되었다.

---

Flux의 주요 구성 요소

1. Action (액션)

   • 사용자의 버튼 클릭 또는 앱의 API 호출 등을 통해 발생하는 이벤트를 말한다.

2. Dispatcher (디스패처)

   • 중앙 허브 역할을 하며, 모든 액션을 받아서 스토어로 전달한다.
   • 디스패처는 액션이 어떤 스토어에 전달되어야 할지를 결정한다.(다만 Redux 는 단일 스토어인 점에 차이가 있다.)

3. Store (스토어)

   • 상태(state)를 관리하는 저장소.
   • 스토어는 상태를 변경합니다.(다만, Redux의 경우 상태를 변경하지 않고, 불변성을 유지하며 새로운 상태를 반환하는 리듀서(Reducer) 사용한다.)
   • Flux의 중요한 특징은 여러 개의 스토어를 가질 수 있는 점이다.
   • 상태가 변경되면, 스토어는 자신과 연결된 뷰(View)에 변경 사실을 알린다.

4. View (뷰)

   • 사용자에 보여지는 부분으로, 스토어로부터 상태를 받아서 화면에 렌더링한다.
   • 사용자의 입력을 처리하고, 필요한 경우 새로운 액션을 디스패처에 전달한다.

---

Flux의 데이터 흐름

Flux의 데이터 흐름은 항상 단방향으로 진행된다.

1. 사용자 입력(View)
   사용자가 버튼을 클릭하거나, 폼을 제출하면 액션(Action)이 생성됨.

2. 액션(Action)
   생성된 액션이 디스패처(Dispatcher)로 전달.

3. 디스패처(Dispatcher)
   디스패처는 이 액션을 스토어(Store)에 전달.

4. 스토어(Store)
   스토어에서 해당 액션을 통해 상태를 업데이트하고 뷰에 상태 변경을 알린다.

5. 뷰(View)
   뷰(View)는 새로운 상태를 렌더링.

---

Flux 패턴의 특징

1. 단방향 데이터 흐름
   데이터를 항상 액션 → 디스패처 → 스토어 → 뷰 순으로 이동한다. 이로 인해 데이터 흐름이 예측 가능하고 디버깅이 용이하다.

2. 중앙 집중식 디스패처
   모든 액션은 디스패처를 통해 전달되므로, 데이터의 흐름을 한곳에서 관리할 수 있다.

3. 상태 관리 분리
   상태(state)는 스토어에서만 관리되고, 뷰(View)는 상태를 직접 수정할 수 없다.

4. 다중 스토어
   애플리케이션에서 서로 다른 상태를 관리하기 위해 여러 개의 스토어를 둘 수 있다.

---

Flux 패턴의 장점

1. 예측 가능성
   데이터 흐름이 단방향으로 진행되기 때문에 상태 변화를 쉽게 추적할 수 있다.

2. 유지보수 용이
   데이터와 로직이 명확하게 분리되어 있어 코드 유지보수가 쉽다.

3. 테스트 용이성
   상태 변경 로직이 스토어에 집중되어 있어 테스트하기가 쉽다.

4. 확장성
   복잡한 애플리케이션에서도 확장 가능하며, 모듈화된 구조를 유지할 수 있다.