- flux 아키텍처를 설명해주세요.
- 답변)
-
의도: 리덕스에서 쓰였던 flux 아키텍처의 작동 방식을 알고 있는지 확인하는 질문
-
팁: 마치 리덕스를 쓸 때처럼 순서대로 얘기하면 좋습니다.
-
모범 답안: flux 아키텍처는 단방향 데이터 흐름을 기반으로하는 아키텍처입니다. 이러한 flux 아키텍처는 불변성 개념을 탑재하여 디버깅에 용이하다는 장점이 있습니다.
flux 아키텍처의 흐름을 순서대로 말씀드리겠습니다. 우선 유저는 View에서 Action을 Dispatch합니다. 그리고 Dispatch된 Action은 곧 Store로 전달됩니다. Store는 Reducer를 사용하여 Action을 판별하고 상태를 업데이트합니다. 그리고 상태가 업데이트 되면 Observing하고 있던 모든 View에게 내용을 알립니다. 마지막으로 View는 업데이트된 내용을 기반으로 리렌더링합니다. 확실히 과정이 좀 복잡하긴 해도 리덕스, Zustand 등 인기가 많은 전역 상태 관리 라이브러리에서 채택하고 있는 아키텍처인만큼 유용한 건 확실하다고 생각합니다.
-
- 답변)
Flux 아키텍처란?
Flux는 단방향 데이터 흐름을 기반으로 하는 애플리케이션 아키텍처이다. 복잡한 상태 관리를 체계적으로 처리하기 위해 만들어졌으며, 특히 React와 잘 어울린다. Flux는 데이터와 UI가 동기화되는 방식을 명확하게 구조화하여 디버깅과 확장을 용이하게 한다.
Flux의 주요 구성 요소
Flux는 크게 4가지 주요 구성 요소로 이루어져 있다.
1. View
애플리케이션의 사용자 인터페이스(UI)를 담당.
사용자가 인터페이스와 상호작용하며 액션을 생성한다.
2. Action
사용자의 인터랙션 또는 비즈니스 로직에 의해 생성되는 명령이다.
상태를 변경할 의도를 나타내며, 종종 type과 payload를 포함한다.
3. Dispatcher
액션을 Store로 전달하는 중심 허브 역할을 합니다.
Flux 아키텍처에서 단일 디스패처(single dispatcher)를 사용하여 데이터 흐름의 일관성을 유지.
4. Store
애플리케이션 상태를 보관하는 곳입니다.
액션을 수신하고 해당 상태를 갱신한 뒤 View에 변경 사실을 알린다.
Flux의 데이터 흐름
-
사용자 인터랙션 (View)
사용자가 버튼 클릭, 입력 등의 이벤트를 통해 액션을 생성. -
액션 생성 및 디스패치 (Action → Dispatcher)
생성된 액션이 디스패처를 통해 Store로 전달된다. -
상태 업데이트 (Store)
Store는 액션을 처리하고 내부 상태를 갱신한다. -
상태 변경 알림 (Store → View)
Store는 상태가 변경되었음을 View에 알린다. -
UI 업데이트 (View)
View는 새로운 상태를 반영하여 리렌더링된다.
Flux 아키텍처 예시
Counter 애플리케이션
Action
🖥️ javascript
// Action
const incrementAction = {
type: "INCREMENT",
payload: 1,
};Dispatcher
🖥️ javascript
// Dispatcher
class Dispatcher {
constructor() {
this.callbacks = [];
}
register(callback) {
this.callbacks.push(callback);
}
dispatch(action) {
this.callbacks.forEach((callback) => callback(action));
}
}
const dispatcher = new Dispatcher();Store
🖥️ javascript
// Store
class Store {
constructor() {
this.state = { count: 0 };
this.listeners = [];
}
getState() {
return this.state;
}
subscribe(listener) {
this.listeners.push(listener);
}
emitChange() {
this.listeners.forEach((listener) => listener());
}
reduce(action) {
switch (action.type) {
case "INCREMENT":
this.state = { count: this.state.count + action.payload };
break;
default:
break;
}
this.emitChange();
}
}
const store = new Store();
// Connect store to dispatcher
dispatcher.register((action) => store.reduce(action));View (React Component)
🖥️ javascript
import React, { useState, useEffect } from "react";
const Counter = () => {
const [count, setCount] = useState(store.getState().count);
useEffect(() => {
const updateState = () => setCount(store.getState().count);
store.subscribe(updateState);
return () => store.listeners.filter((listener) => listener !== updateState);
}, []);
const increment = () => {
dispatcher.dispatch({ type: "INCREMENT", payload: 1 });
};
return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
};
export default Counter;Flux 아키텍처의 장점
- 단방향 데이터 흐름 : 데이터 흐름이 명확하고 디버깅 용이.
- 모듈화 : Action, Dispatcher, Store, View가 명확히 분리되어 코드 관리가 쉽다.
- 확장성 : 상태 관리가 체계적이므로 복잡한 애플리케이션에도 확장이 용이하다.
➡️ Flux 아키텍처는 초기에는 복잡해 보이지만, 단방향 데이터 흐름과 명확한 상태 관리를 통해 대규모 애플리케이션 개발에서 강력한 도구로 자리 잡았다. Redux, Zustand와 같은 라이브러리들은 Flux의 철학을 기반으로 확장된 사례.
