[React] Flux: React의 단방향 테이터 아키텍쳐! 🔄

🔄 Flux 톺아보기!

Flux는 Facebook이 만든 애플리케이션 아키텍처로, 단방향 데이터 흐름을 중심으로 설계되었습니다. React와 함께 사용하면 아주 강력한 도구가 되죠. 오늘은 Flux의 기본 개념, 구성 요소, 동작 방식, 그리고 실무에서 어떻게 활용되는지에 대해 깊이 있는 이야기를 나눠볼게요. 💡

---

📜 Flux는 왜 등장했을까?

React는 UI 렌더링에 강력하지만, 상태 관리에 대한 명확한 규칙은 없어요. 특히, 컴포넌트 간에 데이터를 전달하거나 공유해야 할 때, 부모-자식 간의 상태 전달이 복잡해지거나, 컴포넌트가 여러 곳에서 동일한 데이터를 가져오는 상황에서 관리가 어려워집니다.

 

이런 문제를 해결하기 위해 등장한 것이 Flux예요. “단방향 데이터 흐름”을 통해 애플리케이션 상태를 더 예측 가능하고, 디버깅하기 쉬운 형태로 관리할 수 있게 했죠.

---

🔑 Flux의 핵심 원리

Flux는 단방향 데이터 흐름을 기반으로 하고 있습니다. 간단히 말해, 데이터가 한 방향으로만 흐르도록 강제하여 데이터 상태를 명확히 관리합니다.

---

🌟 Flux의 4가지 구성 요소

1. Action (행동)

• 사용자 인터페이스에서 발생한 이벤트를 묘사한 객체
• 어떤 종류의 동작이 필요한지와 관련 데이터를 포함
• 예: 사용자가 버튼을 클릭하거나, 서버에서 데이터를 가져오는 요청

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

 

2. Dispatcher (디스패처)

• 모든 Action을 중앙에서 관리하며, 이를 Store에 전달
• 단일 Dispatcher가 모든 Action을 처리하기 때문에 데이터 흐름이 예측 가능해집니다.

dispatcher.dispatch({
  type: "ADD_TODO",
  payload: { text: "Learn Flux" },
});

 

3. Store (저장소)

• 애플리케이션의 상태를 저장하는 곳
• Action이 Dispatcher를 통해 전달되면 Store는 데이터를 업데이트
• React 컴포넌트는 Store로부터 데이터를 구독(subscribe)

const todoStore = {
  todos: [],
  addChangeListener(callback) {
    this.onChange = callback;
  },
  dispatchHandler(action) {
    if (action.type === "ADD_TODO") {
      this.todos.push(action.payload.text);
      this.onChange();
    }
  },
};

dispatcher.register(todoStore.dispatchHandler.bind(todoStore));

 

4. View (뷰)

• React 컴포넌트가 View의 역할
• Store에서 상태를 가져와 UI를 렌더링하고, 사용자의 입력을 Action으로 변환

function TodoApp({ todos }) {
  return (
    <div>
      {todos.map((todo, index) => (
        <p key={index}>{todo}</p>
      ))}
      <button onClick={() => addTodoAction("Learn Flux")}>
        Add Todo
      </button>
    </div>
  );
}

---

🔄 Flux의 데이터 흐름

1. 사용자 입력 → Action 생성
   • 사용자가 버튼을 클릭하거나 폼을 제출하면 Action 객체가 생성됩니다.
2. Dispatcher → Store 업데이트
   • Dispatcher가 Action을 받아서 Store로 전달합니다.
   • Store는 Action에 따라 상태를 업데이트합니다.
3. Store → View 업데이트
   • 상태가 업데이트되면 Store는 변경 사항을 View에 알립니다.
   • React는 상태 변화에 따라 UI를 다시 렌더링합니다.
4. React → 사용자 입력
   • React는 사용자로부터 새로운 입력을 받아 다음 Action을 생성합니다.

---

🛠 실무에서 Flux 사용하기

1. 상태 관리의 복잡성 줄이기

Flux는 데이터 흐름을 단방향으로 유지하므로, 상태 변화가 예측 가능하고 디버깅이 쉬워집니다.

 

2. 대규모 애플리케이션

컴포넌트 간 데이터 전달이 복잡한 대규모 애플리케이션에서 특히 유용합니다.

 

3. Redux와의 관계

Redux는 Flux 아키텍처에서 영감을 받아 만들어진 상태 관리 도구입니다. Flux의 구현을 단순화하고, 단일 Store를 사용하여 관리 효율성을 높였습니다.

---

⚠️ Flux 사용 시 주의할 점

1. Dispatcher는 단일해야 한다
   • 여러 Dispatcher를 사용하는 것은 데이터 흐름을 혼란스럽게 만듭니다.
   • 항상 하나의 Dispatcher로 중앙에서 Action을 관리하세요.
2. Store는 상태만 관리해야 한다
   • Store는 UI를 렌더링하거나 비즈니스 로직을 처리해서는 안 됩니다. 오직 데이터를 관리하고 상태를 업데이트하는 데 집중하세요.
3. Action은 순수해야 한다
   • Action은 상태를 변경하지 않고, 단지 상태 변화의 의도를 나타내는 객체여야 합니다.

---

🎯 간단한 Todo 예제

// Dispatcher 생성
const dispatcher = {
  callbacks: [],
  register(callback) {
    this.callbacks.push(callback);
  },
  dispatch(action) {
    this.callbacks.forEach((callback) => callback(action));
  },
};

// Store 생성
const todoStore = {
  todos: [],
  onChange: null,
  dispatchHandler(action) {
    if (action.type === "ADD_TODO") {
      this.todos.push(action.payload.text);
      this.onChange();
    }
  },
};

dispatcher.register(todoStore.dispatchHandler.bind(todoStore));

// View 업데이트
todoStore.onChange = function () {
  console.log("Todos:", todoStore.todos);
};

// Action 생성 및 디스패치
dispatcher.dispatch({
  type: "ADD_TODO",
  payload: { text: "Learn Flux" },
});

---

🌟 Flux가 왜 중요한가?

• Flux는 React의 철학인 단방향 데이터 흐름을 체계적으로 구현할 수 있게 돕습니다.
• 상태 관리가 복잡한 애플리케이션에서 데이터 흐름을 예측 가능하고 안정적으로 만들어줍니다.
• Redux, MobX 등 많은 상태 관리 도구가 Flux의 개념을 바탕으로 탄생했으며, 이를 이해하면 상태 관리 도구를 더 잘 활용할 수 있습니다.

---

마무리하며 🔖

Flux는 단방향 데이터 흐름을 통해 복잡한 애플리케이션의 상태를 관리하는 강력한 아키텍처입니다. React와의 조합은 현대 웹 개발에서 필수적이고, 이를 제대로 이해하면 더 나은 개발자가 될 수 있어요.

 

🌷전설의 개발자가 되어봅시당!🌷