FLUX 아키텍쳐

Flux 아키텍처는 단방향 데이터 흐름을 기반으로 애플리케이션 상태 관리를 체계적으로 하는 디자인 패턴임. 특히 리액트(React)와 함께 사용되는 상태 관리 패턴으로 유명하며, 복잡한 애플리케이션에서 데이터 흐름을 쉽게 추적하고, 상태 관리를 더욱 예측 가능하게 만드는 데 중점을 둠.

 

Flux의 핵심 개념

Flux 아키텍처는 크게 4개의 주요 컴포넌트로 구성됨:

1. Action (액션)
2. Dispatcher (디스패처)
3. Store (스토어)
4. View (뷰)

Flux 데이터 흐름

1. Action (액션)

• 액션은 애플리케이션에서 일어나는 **사건(이벤트)**을 의미함.
• 사용자 입력, API 호출 등으로 발생하며, 액션 객체는 일반적으로 다음과 같은 형식을 가짐:

{
	type : 'ADD_TODO'.
    payload : { text : 'Buy milk' }
}

type : 액션의 종류를 나타냄 (필수)

payload : 추가적인 데이터 (선택)

2. Dispatcher (디스패처)

• 디스패처는 액션을 스토어(Store)에 전달하는 역할을 함.
• Flux 아키텍처에서 디스패처는 중앙 허브 역할을 하며, 액션이 발생하면 스토어로 전달해주는 역할을 수행함.
• 모든 액션은 디스패처를 거쳐 스토어로 전달됨.

3. Store (스토어)

• 스토어는 애플리케이션의 **상태(state)**를 관리하는 곳.
• 액션이 디스패처를 통해 전달되면 스토어는 이를 받아 상태(state)를 업데이트함.
• 스토어는 View에 직접 데이터를 제공하고, 필요한 데이터 변경을 관리함.
• 각 스토어는 특정 도메인(특정 기능)에 관련된 데이터를 관리할 수 있음.

4. View (뷰)

• 뷰는 사용자에게 UI를 표시하는 부분임. React 컴포넌트가 대표적인 뷰임.
• 스토어로부터 **상태(state)**를 받아서 화면에 데이터를 렌더링함.
• 사용자의 입력은 액션을 발생시키고, 이는 다시 디스패처를 통해 스토어에 전달되어 상태를 변경함.
• 이때 스토어의 상태가 변경되면 뷰는 자동으로 업데이트됨.

Flux의 데이터 흐름 요약

1. View에서 사용자가 입력을 하거나, 특정 이벤트가 발생하면 액션이 생성됨.
2. 생성된 액션은 디스패처에 의해 스토어로 전달됨.
3. 스토어는 액션에 따라 내부 **상태(state)**를 업데이트함.
4. 스토어가 상태를 업데이트하면 View는 이를 받아 화면을 업데이트함.

Flux의 단방향 데이터 흐름

Flux는 단방향 데이터 흐름을 강조함. 즉, 데이터가 뷰 → 액션 → 디스패처 → 스토어 → 뷰로 한 방향으로만 흐름. 이는 데이터 흐름을 명확하게 추적할 수 있게 하고, 상태 관리를 더욱 예측 가능하게 만들어줌.

Flux 아키텍처의 장점

1. 단방향 데이터 흐름을 통해 애플리케이션의 데이터 흐름을 쉽게 추적할 수 있음.
2. 상태 관리가 체계적으로 이루어져, 복잡한 애플리케이션에서 상태 변화가 예측 가능해짐.
3. 독립적인 스토어를 통해 각각의 도메인별 상태 관리가 가능함.
4. 데이터가 액션을 통해 흐르기 때문에 디버깅과 유지보수가 쉬움.

Flux와 Redux의 차이점

Redux는 Flux 아키텍처에서 영향을 받아 개발된 상태 관리 라이브러리로, Flux와 개념은 비슷하지만 몇 가지 차이점이 있음:

• 스토어: Flux에서는 여러 개의 스토어를 가질 수 있지만, Redux에서는 하나의 스토어만 사용함.
• 미들웨어: Redux는 미들웨어를 통해 비동기 작업 등을 처리할 수 있는 확장성을 제공함.