ReactJS - 상태 관리를 위한 Flux 사용

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 Flux를 사용한 상태 관리의 흥미로운 여정을 시작할 것입니다. 프로그래밍에 새로운 사람이라면 걱정 마세요 - 저는 친절한 가이드가 되어 이를 단계별로 안내해 드리겠습니다. 이 튜토리얼의 끝을 맺을 때, 프로처럼 상태를 관리할 수 있을 것입니다!

ReactJS - Managing State Using Flux

상태는 무엇이며 왜 관리해야 하나요?

Flux에 들어가기 전에 상태에 대해 이야기해 보겠습니다. 예를 들어, 투두리스트 앱을 만들고 있다고 상상해 보세요. 투두 목록은 앱의 "상태"입니다. 사용자가 투두를 추가하거나 제거할 때 상태가 변합니다. 이러한 변화를 효율적으로 관리하는 것은 원활한 사용자 경험에 매우 중요합니다.

Flux 이해

Flux는 Facebook이 React 애플리케이션에서 데이터 흐름을 관리하기 위해 개발한 아키텍처 패턴입니다. 앱의 데이터를 관리하는 트래픽 컨트롤러라고 생각해 보세요.

Flux의 핵심 개념

액션(Action): 앱에서 일어난 일에 대한 정보를 운반하는 전 messengers.
디스패처(Dispatcher): 액션을 받아들이고 적절한 스토어로 보내는 트래픽 컨트롤러.
스토어(Stores): 애플리케이션의 데이터와 로직이 저장되는 곳.
뷰(Views): 스토어에서 데이터를 표시하는 React 컴포넌트.

다음과 같은 간단한 다이어그램으로 이를 시각화해 보겠습니다:

사용자 상호작용 -> 액션 -> 디스패처 -> 스토어 -> 뷰

Flux 구현: 단계별 가이드

단계 1: 프로젝트 설정

먼저 새로운 React 프로젝트를 설정해 보겠습니다. 터미널을 엽니다고 다음 명령어를 실행합니다:

npx create-react-app flux-todo-app
cd flux-todo-app
npm install flux

단계 2: 액션 생성

액션은 데이터 흐름의 시작점입니다. 간단한 투두 추가 액션을 생성해 보겠습니다:

// src/actions/TodoActions.js
import dispatcher from "../dispatcher";

export function addTodo(text) {
dispatcher.dispatch({
type: "ADD_TODO",
text: text
});
}

여기서 우리는 addTodo 함수를 생성하고, 액션 타입과 투두 텍스트를 디스패처에 전달합니다.

단계 3: 디스패처 설정

디스패처는 우리의 Flux 애플리케이션의 중앙 허브입니다:

// src/dispatcher.js
import { Dispatcher } from "flux";

export default new Dispatcher();

이는 우리의 애플리케이션에서 사용할 디스패처 인스턴스를 생성합니다.

단계 4: 스토어 생성

스토어는 애플리케이션 상태와 로직을 저장하는 곳입니다:

// src/stores/TodoStore.js
import { EventEmitter } from "events";
import dispatcher from "../dispatcher";

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

createTodo(text) {
const id = Date.now();
this.todos.push({
id,
text,
complete: false
});
this.emit("change");
}

getAll() {
return this.todos;
}

handleActions(action) {
switch(action.type) {
case "ADD_TODO":
this.createTodo(action.text);
break;
default:
// 아무 것도 안 κάν음
}
}
}

const todoStore = new TodoStore();
dispatcher.register(todoStore.handleActions.bind(todoStore));

export default todoStore;

이 스토어는 액션을 듣고 투두 목록을 업데이트하고 변화 이벤트를 방출합니다.

단계 5: React 컴포넌트 생성

이제 투두를 표시하고 상호작용할 수 있는 React 컴포넌트를 생성해 보겠습니다:

// src/components/TodoList.js
import React, { useState, useEffect } from 'react';
import TodoStore from '../stores/TodoStore';
import { addTodo } from '../actions/TodoActions';

function TodoList() {
const [todos, setTodos] = useState(TodoStore.getAll());
const [newTodo, setNewTodo] = useState('');

useEffect(() => {
TodoStore.on("change", () => {
setTodos(TodoStore.getAll());
});
}, []);

const handleNewTodoChange = (e) => {
setNewTodo(e.target.value);
};

const handleAddTodo = () => {
addTodo(newTodo);
setNewTodo('');
};

return (
<div>
<h1>내 투두 리스트</h1>
<input
type="text"
value={newTodo}
onChange={handleNewTodoChange}
placeholder="새로운 투두 입력"
/>
<button onClick={handleAddTodo}>투두 추가</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</div>
);
}

export default TodoList;

이 컴포넌트는 TodoStore의 변화를 듣고 현재 투두를 표시하며, 사용자가 새로운 투두를 추가할 수 있게 합니다.

단계 6: 모든 것을 통합

마지막으로, App.js를 업데이트하여 새로운 TodoList 컴포넌트를 사용하도록 합니다:

// src/App.js
import React from 'react';
import TodoList from './components/TodoList';

function App() {
return (
<div className="App">
<TodoList />
</div>
);
}

export default App;

결론

축하합니다! React와 Flux를 사용하여 간단한 투두 앱을 완성했습니다. 우리가 배운 것을 요약해 보겠습니다:

Flux는 React 애플리케이션에서 상태를 관리하기 위한 아키텍처 패턴입니다.
액션, 디스패처, 스토어, 뷰로 구성됩니다.
데이터는 한 방향으로 흐릅니다: 액션 -> 디스패처 -> 스토어 -> 뷰.

이 유일한 데이터 흐름은 애플리케이션을 예측 가능하게 하고 디버깅이 용이하게 합니다. 더 큰 애플리케이션을 개발할 때, Flux가 제공하는 구조와 명확성을 감사할 것입니다.

상태를 효과적으로 관리하는 것은 마치 저글링하는 것처럼 보일 수 있습니다 - 연습이 필요하지만, 한 번 익혀지면 매우 강력하고 즐겁습니다!

계속 코딩하고, 호기심을 유지하고, React를 즐겨 주세요!

Credits: Image by storyset