Immer를 활용한 CRUD 애플리케이션 구현하기

27 Sep 2023

immer

Immer는 불변성을 유지하면서 상태를 업데이트하는 데 도움을 주는 JavaScript 라이브러리입니다. 이번 블로그 포스트에서는 Immer를 활용하여 CRUD(Create, Read, Update, Delete) 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정

먼저 프로젝트를 설정하고 필요한 패키지를 설치해야 합니다. 프로젝트 폴더를 생성한 후 터미널에서 다음 명령어를 입력해주세요:

mkdir immer-crud-app
cd immer-crud-app
npm init -y

이제 필요한 패키지인 Immer를 설치해줍니다:

npm install immer

2. 애플리케이션 구현

이제 Immer를 사용하여 CRUD 애플리케이션을 구현해보겠습니다. 먼저 index.js 파일을 생성하고 다음 코드를 작성해주세요:

const { produce } = require('immer');

let todos = [];

function createTodo(title) {
  todos = produce(todos, draft => {
    draft.push({ id: todos.length + 1, title, completed: false });
  });
}

function updateTodoTitle(id, newTitle) {
  todos = produce(todos, draft => {
    const todo = draft.find(todo => todo.id === id);
    todo.title = newTitle;
  });
}

function toggleTodoCompleted(id) {
  todos = produce(todos, draft => {
    const todo = draft.find(todo => todo.id === id);
    todo.completed = !todo.completed;
  });
}

function deleteTodo(id) {
  todos = produce(todos, draft => {
    const index = draft.findIndex(todo => todo.id === id);
    draft.splice(index, 1);
  });
}

// 예제를 위해 간단한 사용법을 보여줍니다.
createTodo('할 일 1');
createTodo('할 일 2');
toggleTodoCompleted(2);
deleteTodo(1);

console.log(todos);

위 코드는 간단한 todos 리스트를 관리하는 것을 보여주는 예제입니다. Immer의 produce 함수를 사용하여 불변성을 유지하면서 todos 상태를 업데이트하고 있습니다.

3. 애플리케이션 실행

터미널에서 node index.js 명령어를 입력하여 애플리케이션을 실행해보세요. todos 리스트의 변경 내용이 출력될 것입니다.

4. 결론

Immer는 불변성 관리를 훨씬 쉽게 해주는 강력한 라이브러리입니다. 이번 블로그 포스트에서는 Immer를 사용하여 CRUD 애플리케이션을 구현하는 방법을 배웠습니다. Immer를 사용하면 코드를 간결하게 유지하면서도 불변성을 유지할 수 있습니다.

#programming #JavaScript