flux 패턴이란

1745105037-flux-pattern.png

Flux 패턴은 Facebook(현 Meta)에서 개발한 단방향 데이터 흐름 아키텍처 패턴이다. 복잡한 UI를 가진 웹 애플리케이션에서 데이터 흐름을 관리하기 위해 만들어 졌으며, 특히 React와 함께 사용하기 위해 설계되었다.

주요 특징#

1. 단방향 데이터 흐름: 데이터는 항상 한방향(Dispatcher -> Store -> View)으로만 흐른다.
2. 예측 가능한 상태 관리: 애플리케이션의 상태가 어떻게 변하는지 추적하기 쉽다.
3. 중앙 집중식 Dispatcher:모든 액션이 중앙 Dispatcher를 통과한다.

핵심 구성 요소#

1. 액션(Actioin): 사용자 상호작용이나 API응답 등으로 발생하는 이벤트이다. 각 액션은 type과 관련 payload(데이터)를 가진다.

2. 디스패처(Dispatcher): 액션을 받아서 등록된 모든 스토어에 전달하는 중앙 허브이다. Flux의 디스패처는 단일 디스패처로, 모든 액션은 이를 통과한다.

3. 스토어(Store): 애플리케이션의 상태와 비즈니스 로직을 포함한다. 디스패치로부터 액션을 받아 처리하고, 상태를 업데이트한다. 스토어는 상태가 변경되면 뷰에게 알린다.

4. 뷰(View): 주로 React 컴포넌트로 구현하다. 스토어의 상태를 화면에 렌더링하고, 사용자 입력에 반응하여 새로운 액션을 생성한다.

데어터 흐름#

Flux 데이터 흐름은 다음과 같은 단계로 진행된다.

1. 사용자가 뷰와 상호작용한다.(예: 버튼 클릭)
2. 뷰는 액션 크리에이터(Action Creator)
3. 액션은 디스패처로 전달된다.
4. 디스패처는 액션을 모든 스토어에 전달한다.
5. 스토어는 액션에 따라 상태를 업데이트하고, 변경 이벤트를 발생시킨다.
6. 뷰는 스토어의 변경 이벤트를 감지하고, 새로운 상태에 따라 리렌더링된다.

Flux 패턴의 장단점#

• 장점

  • 예측 가능한 데이터 흐름
  • 상태 관리의 일관성
  • 디버깅 용이성
  • 코드 구조의 명확성

• 한계점

  • 간단한 애플리케이션에서는 과도한 보일러플레이트 코드가 발생
  • 비동기 작업 처리를 위한 추가 라이브러리 필요
  • 학습 곡선이 있음