Immer를 사용한 Todo 애플리케이션 만들기

27 Sep 2023

immer

이번 글에서는 Immer를 사용하여 Todo 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Immer는 JavaScript의 불변성을 관리하는 라이브러리로, 간결하고 간편한 코드 작성을 도와줍니다.

1. 프로젝트 설정

먼저, 새로운 React 프로젝트를 생성합니다.

npx create-react-app todo-app
cd todo-app
npm start

2. Immer 설치

Immer를 설치합니다.

npm install immer

3. Todo 상태 관리하기

Todo 애플리케이션의 상태를 관리하기 위해 Immer를 사용합니다. 예를 들어, Todo 목록을 추가하고 삭제하는 기능을 구현하려고 합니다.

import produce from 'immer';

const initialState = {
  todos: []
};

const reducer = produce((state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      state.todos.push(action.payload);
      break;
    case 'DELETE_TODO':
      state.todos = state.todos.filter(todo => todo.id !== action.payload);
      break;
    default:
      break;
  }
}, initialState);

위의 코드에서 produce 함수를 사용하여 불변성을 관리합니다. produce 함수는 첫 번째 매개변수로 현재 상태를 전달하고, 두 번째 매개변수로 액션을 받습니다. produce 함수 내에서 상태를 수정할 수 있으며, 이를 통해 Immer가 내부적으로 불변성을 유지하게 됩니다.

4. Todo 컴포넌트 생성하기

Todo 컴포넌트를 생성하여 Todo 목록을 화면에 표시합니다. 이때, 상태 값을 Immer를 사용하여 수정할 수 있습니다.

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, deleteTodo } from './actions';

const Todo = () => {
  const [newTodo, setNewTodo] = useState('');
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

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

  const handleDeleteTodo = (id) => {
    dispatch(deleteTodo(id));
  };

  return (
    <div>
      <input type="text" value={newTodo} onChange={e => setNewTodo(e.target.value)} />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Todo;

위의 코드에서 useSelector와 useDispatch 훅을 사용하여 상태 값을 가져오고, 액션을 dispatch 할 수 있습니다. Todo 목록을 표시하기 위해 map 함수를 사용하고, 각 Todo에 대해 삭제 버튼을 추가합니다.

5. Todo 애플리케이션 실행하기

Todo 컴포넌트를 렌더링하여 Todo 애플리케이션을 실행합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';
import Todo from './Todo';

const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <Todo />
  </Provider>,
  document.getElementById('root')
);

위의 코드에서 createStore 함수를 사용하여 스토어를 생성하고, Provider 컴포넌트로 스토어를 전달합니다. 그리고 Todo 컴포넌트를 렌더링하여 애플리케이션을 실행합니다.

마무리

이제 Immer를 사용하여 Todo 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Immer를 활용하면 불변성을 관리하는 코드를 더 간결하고 명확하게 작성할 수 있으며, 애플리케이션의 유지 보수성을 향상시킬 수 있습니다. #React #Immer