[React] Flux 패턴이란?

해피몬·2024년 10월 26일

Flux 패턴이란? 🤔

Flux는 Facebook에서 개발한 애플리케이션 아키텍처 패턴으로, 특히 React 애플리케이션의 상태 관리를 효율적으로 수행하기 위해 설계됨. Flux는 단방향 데이터 흐름을 핵심으로 하며, 상태의 예측 가능성과 유지보수성을 높이기 위해 데이터가 특정 순서로 흐르도록 만듦. Redux와 같은 상태 관리 라이브러리도 기본적으로 Flux 패턴을 기반으로 함.

Flux 패턴의 주요 개념 🌟

Flux 패턴은 네 가지 주요 구성 요소를 사용하여 단방향 데이터 흐름을 구현함

액션 (Action): 애플리케이션에서 발생한 이벤트나 상태 변경 요청을 나타냄.
디스패처 (Dispatcher): 액션을 전달하는 중앙 허브 역할을 하며, 모든 데이터 흐름을 통제함.
스토어 (Store): 애플리케이션의 상태를 보관하고, 상태 변경을 관리함.
뷰 (View): React 컴포넌트처럼 사용자 인터페이스를 렌더링하여 사용자와 상호작용함.

Flux 패턴의 단방향 데이터 흐름 📋

Flux의 가장 큰 특징은 단방향 데이터 흐름으로, 이는 데이터가 애플리케이션 내에서 일관된 방향으로만 흐르게 하는 구조임. 이를 통해 데이터 흐름이 예측 가능해지고, 디버깅이 쉬워짐. Flux의 데이터 흐름은 다음과 같음:

액션(Action): 상태 변경을 요청하는 액션 객체가 생성됨. 예를 들어, 사용자가 버튼을 클릭하여 새로운 데이터를 요청할 때 액션이 발생할 수 있음.
디스패처(Dispatcher): 모든 액션은 디스패처를 통해 전달되며, 디스패처는 액션을 각 스토어에 보냄. 디스패처는 데이터 흐름을 통제하고, 특정 스토어가 특정 액션을 처리하도록 조정함.
스토어(Store): 스토어는 디스패처로부터 액션을 받고, 상태를 업데이트함. 스토어는 상태를 보관하며, 상태 변경이 발생하면 이벤트를 발생시켜 뷰에 알려줌.
뷰(View): 상태가 변경되면, 뷰는 최신 상태를 반영하여 UI를 업데이트함. 뷰는 사용자의 상호작용을 통해 새로운 액션을 생성하여 디스패처로 보낼 수 있음.

Flux 패턴의 구성 요소 ✍️

액션 (Action)

액션은 상태 변경을 요청하는 객체로, 타입(type)과 페이로드(payload)로 구성됨. 액션 타입은 상태 변경의 유형을 나타내고, 페이로드는 상태 변경에 필요한 데이터를 포함함.

const addTodoAction = {
  type: "ADD_TODO",
  payload: { id: 1, text: "Learn Flux" },
};

디스패처 (Dispatcher)

디스패처는 모든 액션을 수신하고, 이를 스토어에 전달하는 중앙 통제 장치 역할을 함. 디스패처는 단방향 데이터 흐름을 보장하며, 액션이 올바른 순서로 스토어에 전달되도록 함.

const dispatcher = new Dispatcher();
dispatcher.dispatch(addTodoAction);

스토어 (Store)

스토어는 애플리케이션의 상태를 보관하고, 상태를 변경하는 역할을 수행함. 상태 변경이 발생하면 구독된 뷰에 알림을 보내 UI를 업데이트함. Flux에서는 여러 스토어가 존재할 수 있으며, 각 스토어는 특정 상태나 로직을 관리함.

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }

  handleAction(action) {
    if (action.type === "ADD_TODO") {
      this.todos.push(action.payload);
      this.emit("change");
    }
  }

  getTodos() {
    return this.todos;
  }
}

const todoStore = new TodoStore();

뷰 (View)

뷰는 스토어의 상태를 기반으로 UI를 렌더링하는 역할을 하며, 상태가 변경되면 자동으로 업데이트됨. React 컴포넌트는 일반적으로 Flux 패턴에서 뷰의 역할을 함. 뷰는 사용자 상호작용을 통해 새로운 액션을 생성하고, 이를 디스패처로 보냄.

function TodoList() {
  const [todos, setTodos] = useState(todoStore.getTodos());

  useEffect(() => {
    const handleChange = () => setTodos(todoStore.getTodos());
    todoStore.on("change", handleChange);
    return () => todoStore.off("change", handleChange);
  }, []);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Flux 패턴의 장점 🎯

데이터 흐름이 예측 가능함: 단방향 데이터 흐름 덕분에 데이터가 예측 가능한 방식으로 전달되므로, 버그를 추적하고 수정하기 쉬움.
코드 구조가 명확함: 액션, 디스패처, 스토어, 뷰로 역할이 분리되어 있어, 코드 구조가 명확하고 유지보수가 쉬움.
테스트 용이성: 액션과 스토어가 독립적이므로 개별적으로 테스트할 수 있음.

Flux 패턴과 Redux 비교 📊

Redux는 Flux 패턴을 기반으로 한 상태 관리 라이브러리로, Flux의 개념을 간소화하고 확장함.

구분	Flux	Redux
데이터 흐름	단방향 흐름	단방향 흐름
디스패처	Flux에서는 디스패처가 필요함	Redux는 디스패처 없이도 동작함
스토어	여러 스토어 사용 가능	하나의 중앙 스토어 사용
상태 변경	각 스토어가 상태 변경 관리	리듀서로 상태 변경 관리
미들웨어	기본적으로 제공되지 않음	미들웨어 시스템이 내장됨