Redux 및 Redux-Saga를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Redux는 상태 관리 라이브러리이며, Redux-Saga는 비동기 작업을 처리하기 위한 미들웨어입니다.
npm install redux react-redux redux-saga
Redux 스토어를 설정하고 Redux-Saga 미들웨어를 추가합니다.
// src/store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { put, takeEvery, all } from 'redux-saga/effects';
// 액션 타입 정의
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
// 액션 생성자 함수
export const addTodo = (text) => ({
type: ADD_TODO,
text,
});
export const toggleTodo = (id) => ({
type: TOGGLE_TODO,
id,
});
// 초기 상태 설정
const initialState = {
todos: [],
};
// 리듀서 정의
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [
...state.todos,
{
id: state.todos.length + 1,
text: action.text,
completed: false,
},
],
};
case TOGGLE_TODO:
return {
...state,
todos: state.todos.map((todo) =>
todo.id === action.id
? { ...todo, completed: !todo.completed }
: todo
),
};
default:
return state;
}
};
// Redux-Saga 사가 함수
function* addTodoSaga(action) {
yield put(addTodo(action.text));
}
// 사가 워커 함수
function* rootSaga() {
yield all([takeEvery(ADD_TODO, addTodoSaga)]);
}
// 사가 미들웨어 생성
const sagaMiddleware = createSagaMiddleware();
// 스토어 생성
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
// 사가 실행
sagaMiddleware.run(rootSaga);
export default store;
Redux 스토어와 상호작용하는 React 컴포넌트를 작성합니다.
// src/components/TodoList.js
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addTodo, toggleTodo } from '../store';
const TodoList = ({ todos, addTodo, toggleTodo }) => {
const [newTodo, setNewTodo] = useState('');
const handleAddTodo = () => {
if (newTodo.trim() === '') return;
addTodo(newTodo);
setNewTodo('');
};
return (
<div>
<h1>Todo List</h1>
<div>
<input
type="text"
placeholder="할 일을 입력하세요"
value={newTodo}
onChange={(e) => setNewTodo(e.target.value)}
/>
<button onClick={handleAddTodo}>추가</button>
</div>
<ul>
{todos.map((todo) => (
<li
key={todo.id}
onClick={() => toggleTodo(todo.id)}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</li>
))}
</ul>
</div>
);
};
const mapStateToProps = (state) => ({
todos: state.todos,
});
const mapDispatchToProps = {
addTodo,
toggleTodo,
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
Redux 스토어를 React 애플리케이션에 연결하고 TodoList 컴포넌트를 렌더링합니다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './components/TodoList';
ReactDOM.render(
<Provider store={store}>
<TodoList />
</Provider>,
document.getElementById('root')
);
이제 Redux 및 Redux-Saga를 사용한 간단한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링과 추가 기능을 구현하여 확장할 수 있습니다.