18.Flux 아키텍처 완벽 이해: React 애플리케이션 상태 관리의 기초

"Flux 아키텍처 완벽 이해: React 애플리케이션 상태 관리의 기초"

---

1시간 분량 강의안 (Flux 기초)

강의 목표

1. Flux 아키텍처의 개념과 필요성을 이해한다.
2. Flux의 주요 구성 요소(스토어, 디스패처, 액션, 뷰)를 학습한다.
3. Flux를 활용하여 React 애플리케이션의 상태 관리를 구현한다.

---

강의 목차

---

1. Flux란 무엇인가? (10분)

Flux의 정의

• Flux는 Facebook에서 제안한 React 애플리케이션을 위한 아키텍처 패턴으로, 단방향 데이터 흐름을 기반으로 설계되었습니다.

Flux의 주요 특징

1. 단방향 데이터 흐름: 데이터가 항상 한 방향으로 흐르며, 상태 관리가 예측 가능.
2. 컴포넌트 간 독립성: 컴포넌트가 상태 대신 데이터를 받기 때문에 독립적이고 재사용 가능.
3. 중앙 집중식 상태 관리: 상태가 중앙 저장소(Store)에 관리되어 상태 변경 추적이 용이.

Flux의 구성 요소

1. Action: 상태 변경을 요청하는 명령.
2. Dispatcher: Action을 Store로 전달하는 중앙 허브.
3. Store: 상태와 로직을 관리하는 컨테이너.
4. View: Store의 데이터를 기반으로 UI를 렌더링.

---

2. Flux의 데이터 흐름 (10분)

Flux 데이터 흐름

1. Action: 이벤트 발생 시 액션을 생성.
2. Dispatcher: 액션을 Store에 전달.
3. Store: 액션을 처리하고 상태를 업데이트.
4. View: 상태 변경을 감지하여 UI를 업데이트.

Flux와 MVC의 차이점

특징FluxMVC

데이터 흐름	단방향 데이터 흐름	양방향 데이터 흐름
상태 관리	Store에서 중앙 관리	여러 Model에서 분산 관리
복잡도	단순하고 예측 가능	복잡하고 의존성 증가

---

3. Flux의 주요 구성 요소 구현 (20분)

1단계: Action 생성

• 액션은 상태 변경 요청을 나타내는 객체.

const Actions = {
  increment: () => {
    Dispatcher.dispatch({
      type: 'INCREMENT',
    });
  },
  decrement: () => {
    Dispatcher.dispatch({
      type: 'DECREMENT',
    });
  },
};

2단계: Dispatcher 설정

• Dispatcher는 액션을 Store로 전달하는 역할.

import { Dispatcher } from 'flux';

const AppDispatcher = new Dispatcher();
export default AppDispatcher;

3단계: Store 생성

• Store는 상태를 관리하고 변경 사항을 View에 알림.

import { EventEmitter } from 'events';
import AppDispatcher from './AppDispatcher';

const Store = Object.assign({}, EventEmitter.prototype, {
  count: 0,

  getCount() {
    return this.count;
  },

  handleAction(action) {
    switch (action.type) {
      case 'INCREMENT':
        this.count++;
        this.emit('change');
        break;
      case 'DECREMENT':
        this.count--;
        this.emit('change');
        break;
      default:
        break;
    }
  },
});

AppDispatcher.register(Store.handleAction.bind(Store));
export default Store;

4단계: View에서 Store 사용

• View는 Store 데이터를 구독하고 변경 시 UI를 업데이트.

import React, { useState, useEffect } from 'react';
import Store from './Store';
import Actions from './Actions';

function Counter() {
  const [count, setCount] = useState(Store.getCount());

  useEffect(() => {
    const handleChange = () => setCount(Store.getCount());
    Store.on('change', handleChange);

    return () => {
      Store.removeListener('change', handleChange);
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={Actions.increment}>Increment</button>
      <button onClick={Actions.decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

---

4. Flux 활용 사례 및 비교 (10분)

Flux 활용 사례

• Flux는 단방향 데이터 흐름이 필요한 대규모 애플리케이션에서 주로 사용됩니다.
• Redux와 MobX의 설계 철학에 영향을 미친 패턴입니다.

Flux와 Redux 비교

특징FluxRedux

Dispatcher 사용 여부	사용	사용하지 않음
Store	여러 Store	단일 Store
데이터 흐름	단방향 데이터 흐름	단방향 데이터 흐름
Boilerplate 코드	상대적으로 많음	상대적으로 간결함

---

5. 실습 과제 (10분)

실습 과제

1. Flux 패턴을 사용하여 Todo 애플리케이션을 구현하세요.
2. Todo 항목을 추가, 완료 표시, 삭제하는 액션과 Store를 작성하세요.
3. 변경 사항을 View에서 반영하세요.

예제

• 액션 예제:

  const Actions = {
    addTodo: (text) => {
      Dispatcher.dispatch({
        type: 'ADD_TODO',
        text,
      });
    },
  };

  
  
• Store 예제:

const Store = Object.assign({}, EventEmitter.prototype, {
  todos: [],

  handleAction(action) {
    switch (action.type) {
      case 'ADD_TODO':
        this.todos.push({ text: action.text, completed: false });
        this.emit('change');
        break;
      default:
        break;
    }
  },
});

 

---

6. Q&A 및 정리 (10분)

• Q&A:
  1. Flux와 Redux의 주요 차이점은 무엇인가요?
  2. Flux는 어떤 규모의 애플리케이션에서 적합한가요?
• 요약:
  • Flux는 React 애플리케이션에서 단방향 데이터 흐름을 관리하기 위한 강력한 패턴입니다.
  • Action, Dispatcher, Store, View의 구성 요소를 이해하고 활용하면 상태 관리를 효율적으로 구현할 수 있습니다.
  • Redux와 같은 현대적인 상태 관리 도구의 기초가 되는 개념입니다.