Flux 패턴

---

Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다.

사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처

Flux 패턴의 주요 구성 요소

1. Action (액션)

Action은 애플리케이션 내에서 일어나는 모든 이벤트를 나타낸다. 액션은 자바스크립트 객체로, type 속성과 추가 데이터를 포함할 수 있다.

{
  type: 'ADD_TODO',
  payload: { text: 'Learn Flux' }
}

2. Dispatcher (디스패처)

Dispatcher는 액션을 스토어에 전달하는 중앙 허브 역할을 한다. 액션이 발생하면 디스패처는 모든 스토어에 그 액션을 전달하여 상태를 업데이트한다.
디스패처는 콜백 함수를 등록하고 액션을 분배하는 역할을 한다.

3. Store (스토어)

Store는 애플리케이션의 상태와 비즈니스 로직을 관리한다. 각 스토어는 상태와 관련된 여러 액션을 처리하고 상태를 업데이트한다.
스토어는 상태 변경이 일어나면 뷰에 변경을 알린다.
애플리케이션에서 여러 스토어를 사용할 수 있다.

4. View (뷰):

View는 사용자 인터페이스를 나타낸다. React 컴포넌트가 여기에 해당한다.
뷰는 스토어의 상태를 구독하고, 상태가 변경될 때마다 다시 렌더링된다.
뷰에서 사용자 상호작용이 일어나면 새로운 액션이 생성되고 디스패처에 전달된다.

Flux의 데이터 흐름

1. 액션 생성

사용자 인터페이스에서 이벤트가 발생하면 액션이 생성된다. 예를 들어, 버튼 클릭 이벤트는 새로운 액션을 생성할 수 있다.

2. 액션 디스패치

생성된 액션은 디스패처를 통해 모든 스토어에 전달된.

. 스토어 업데이트

스토어는 전달받은 액션을 처리하고, 내부 상태를 업데이트한. 스토어는 상태 변경이 발생했음을 뷰에 알린다

4. 뷰 업데이트

뷰는 스토어로부터 상태 변경 알림을 받고, 새로운 상태에 따라 다시 렌더링된.

Flux 패턴의 장점

- 단방향 데이터 흐름

데이터가 항상 한 방향으로만 흐르기 때문에 상태 변경을 추적하기 쉽고, 데이터 흐름이 명확해진다.

- 상태 관리의 예측 가능성

모든 상태 변경은 액션을 통해 이루어지므로 상태 변화를 예측하고 디버깅하기 쉽다.

- 유지보수성 향상

각 구성 요소가 명확하게 분리되어 있어 코드의 모듈화와 재사용성이 높아진다.

- 확장성

대규모 애플리케이션에서도 일관된 방식으로 상태를 관리할 수 있어 확장성이 높다.