[React] Flux 아키텍처란?

jiny·2025년 3월 10일

기술 면접

목록 보기

59/78

🗣️ Flux 아키텍처를 설명해주세요.

의도: 리덕스에서 쓰였던 Flux 아키텍처의 작동 방식을 알고 있는지 확인하는 질문
팁: 마치 리덕스를 쓸 때처럼 순서대로 얘기하면 좋다.
나의 답안

Flux 아키텍처는 페이스북이 리액트 애플리케이션의 데이터 흐름을 예측 가능하고 일관성 있게 관리하기 위해 제안한 단방향 데이터 흐름 아키텍처입니다.
핵심은 상태가 한 방향으로만 흐른다는 점입니다.

Flux는 크게 Action, Dispatcher, Store, View의 네 가지 주요 구성 요소로 이루어져 있습니다.
Action은 사용자의 입력이나 서버 응답처럼 무슨 일이 일어났는지를 표현하는 객체입니다.
Dispatcher는 모든 액션을 중앙에서 받아서 적절한 Store로 전달하는 허브 역할을 합니다.
Store는 애플리케이션의 상태와 비즈니스 로직을 보관하고, 액션을 받아 상태를 업데이트합니다.
View는 리액트 컴포넌트로, Store의 상태를 구독하고, 변경되면 UI를 다시 렌더링합니다.

이 구조에서는 데이터가 항상 Action → Dispatcher → Store → View 순서로 흐르며, View에서 다시 Action을 발생시켜 순환이 이어집니다.
이런 단방향 데이터 흐름 덕분에 상태 변경 경로가 명확해지고, 디버깅과 유지보수가 쉬워집니다.
Redux 역시 이러한 Flux 아키텍처의 개념을 발전시킨 라이브러리라고 볼 수 있습니다.
주어진 답안 (모범 답안)

Flux 아키텍처는 단방향 데이터 흐름을 기반으로 하는 아키텍처입니다.
이러한 Flux 아키텍처는 불변성 개념을 탑재하여 디버깅에 용이하다는 장점이 있습니다.

Flux 아키텍처의 흐름을 순서대로 말씀드리겠습니다.
우선 유저는 View에서 Action을 Dispatch합니다.
그리고 Dispatch된 Action은 곧 Store로 전달됩니다.
Store는 Reducer를 사용하여 Action을 판별하고 상태를 업데이트합니다.
그리고 상태가 업데이트되면 Observing하고 있던 모든 View에게 내용을 알립니다.
마지막으로 View는 업데이트된 내용을 기반으로 리렌더링합니다.

확실히 과정이 좀 복잡하긴 해도 Redux, zustand 등 인기가 많은 전역 상태 관리 라이브러리에서 채택하고 있는 아키텍처인 만큼 유용한 건 확실하다고 생각합니다.

📝 개념 정리

Flux는 페이스북에서 애플리케이션의 데이터 흐름을 관리하기 위해 개발한 아키텍처 패턴이다.
이는 특히 React 애플리케이션에서 사용하기 적합하며, 단방향 데이터 흐름을 통해 상태 관리를 명확하고 예측 가능하게 만드는 데 초점이 맞춰져 있다.
Flux는 MVC(Model-View-Controller) 패턴의 대안으로 설계되었으며, React의 컴포넌트 기반 구조와 잘 어우러진다.

🌟 Flux의 핵심 개념

Flux는 크게 Action, Dispatcher, Store, View의 네 가지 주요 요소로 구성된다.
이들 간의 데이터 흐름은 단방향으로만 이루어진다. 각 요소의 역할은 다음과 같다.

Action
- Action은 애플리케이션에서 발생한 사용자 이벤트나 서버로부터의 데이터를 나타내는 단순 객체이다.
- Action 객체는 일반적으로 다음과 같은 구조를 가진다.
```
{
  type: "ACTION_TYPE", // 액션의 종류를 나타내는 문자열
  payload: { ... } // 액션과 관련된 데이터 (선택 사항)
}
```
- Action은 type 필드를 필수로 포함하며, 이를 통해 스토어에서 어떤 작업을 수행해야 하는지 결정한다.
- 예시 (Action Creater, 액션 생성자)
```
{
  type: "ADD_TODO",
  payload: {
    id: 1,
    text: "Buy groceries"
  }
}
```

Dispatcher
- Dispatcher는 Flux 아키텍처의 중앙 허브 역할을 하며, 모든 Action이 반드시 Dispatcher를 통해 전달된다.
- Dispatcher는 Action을 받아서 이를 Store로 전달하며, 이를 통해 애플리케이션의 상태를 변경하는 작업이 수행된다.
- Dispatcher는 단순한 Action 배포 메커니즘으로, 로직을 포함하지 않는다.
- 예시
```
import { Dispatcher } from "flux";
const dispatcher = new Dispatcher();
dispatcher.dispatch({
  type: "ADD_TODO",
  payload: {
    id: 1,
    text: "Write Flux documentation"
  }
});
```

Store
- Store는 애플리케이션의 상태(state)를 보관하는 컨테이너이다.
- Store는 상태를 관리하고, Dispatcher로부터 받은 Action에 따라 상태를 업데이트한다.
- React의 컴포넌트는 Store로부터 상태를 읽어와 UI를 렌더링한다.
- 중요한 점은, Store는 변경된 상태를 View에 직접 전달하지 않고, 상태 변경 이벤트를 발행하여 View가 이를 구독(subscribe)하도록 한다.
- 주요 특징
  - Store는 단일 책임 원칙을 따른다. (하나의 Store는 특정한 데이터만 관리)
  - Store는 상태를 변경하는 로직을 포함하고 있으며, 이는 Reducer 함수와 유사하다.

View
- View는 React 컴포넌트를 포함한 사용자 인터페이스(UI)를 의미한다.
- View는 Store에서 상태 변경을 구독(subscribe)하고, 상태가 변경될 때 UI를 다시 렌더링한다.
- 사용자 입력 이벤트는 Action을 발생시키며, 이는 Dispatcher로 전달된다.

🌟 Flux의 데이터 흐름

Flux의 가장 큰 특징은 단방향 데이터 흐름이다.
데이터가 애플리케이션 내에서 어떻게 이동하는지 설명하면 다음과 같다.

사용자 이벤트 발생: 사용자가 버튼을 클릭하거나 입력을 수행한다.
Action 생성: View에서 이벤트 핸들러가 Action을 생성한다.
Dispatcher에 전달: Action은 Dispatcher를 통해 전달된다.
Store 업데이트: Dispatcher는 Store에 Action을 전달하고, Store는 이를 처리하여 상태를 업데이트한다.
View 갱신: Store는 상태가 변경되었음을 알리고, View는 새로운 상태를 반영하여 UI를 업데이트한다.

이 과정은 항상 한 방향으로만 흐른다.

🌟 Flux와 Redux의 차이점

Flux의 발전형으로 Redux가 널리 사용되면서 두 가지를 비교하는 경우가 많다.
주요 차이점은 다음과 같다.

특징	Flux	Redux
Store 개수	여러 개의 Store를 사용	단일 Store 사용
Dispatcher	별도의 Dispatcher가 필요	Action과 Reducer로 Dispatcher 대체
상태 관리 방식	상태를 직접 관리	상태는 순수 함수(Reducer)를 통해 관리
액션 처리	Dispatcher가 Store에 전달	Redux의 `dispatch()`가 Reducer에 전달
미들웨어	미들웨어 지원 부족	미들웨어(Redux Thunk, Saga 등) 사용 가능