Immer를 사용하여 복잡한 데이터 구조 관리하기

27 Sep 2023

immer

Immer는 JavaScript에서 복잡한 데이터 구조를 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. Immer를 사용하면 불변성을 유지하면서도 간단한 코드로 데이터의 변경이 가능해집니다.

Immer란?

Immer는 함수형 프로그래밍의 개념을 활용하여 불변성을 유지하면서 상태를 변경할 수 있는 방법을 제공하는 라이브러리입니다. 기존의 상태를 변경하는 메서드를 사용하지 않고, 새로운 상태를 생성하는 방식으로 데이터를 관리합니다.

복잡한 데이터 구조 관리하기

복잡한 데이터 구조를 관리할 때는 Immer가 특히 유용합니다. 다음은 Immer를 사용하여 복잡한 데이터 구조를 관리하는 예시입니다.

import produce from 'immer';

const initialState = {
  users: [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 30 },
    { id: 3, name: 'Bob', age: 35 },
  ],
  selectedUser: null,
};

const reducer = produce((state, action) => {
  switch (action.type) {
    case 'SELECT_USER':
      state.selectedUser = action.payload;
      break;
    case 'UPDATE_USER':
      const { id, name, age } = action.payload;
      const user = state.users.find((user) => user.id === id);
      if (user) {
        user.name = name;
        user.age = age;
      }
      break;
    default:
      break;
  }
}, initialState);

const newState = reducer({ type: 'SELECT_USER', payload: 2 });
console.log(newState.selectedUser); // Output: { id: 2, name: 'Jane', age: 30 }

const updatedState = reducer({ type: 'UPDATE_USER', payload: { id: 1, name: 'David', age: 28 } });
console.log(updatedState.users[0]); // Output: { id: 1, name: 'David', age: 28 }

위의 코드 예시에서 initialState는 초기 상태를 의미합니다. produce 함수를 사용하여 reducer 함수를 만들면, Immer가 자동으로 변경된 상태를 반환해줍니다. SELECT_USER 액션은 선택된 사용자를 업데이트하고, UPDATE_USER 액션은 사용자의 이름과 나이를 업데이트합니다.

이렇게 Immer를 사용하면 데이터를 간편하게 변경할 수 있고, 불변성을 유지하면서 코드를 더 직관적으로 작성할 수 있습니다.

#javascript #Immer