트리 구조는 데이터를 계층적으로 구성하기 위해 많이 사용되는 방법 중 하나입니다. 이러한 트리 구조 데이터를 처리하기 위해서는 상태 변경이 필요한 경우가 많은데, Immer 라이브러리를 사용하면 편리하게 상태를 변경할 수 있습니다.

Immer란 무엇인가요?

Immer는 불변성을 유지하는 상태 관리 라이브러리입니다. 이 라이브러리는 기존의 상태를 변경하는 대신 새로운 상태를 만들어 내는 방식으로 작동합니다. 이를 통해 복잡한 상태 관리 로직을 더 쉽게 작성할 수 있습니다. 또한, 코드의 가독성을 높여 유지 보수성을 개선할 수 있습니다.

Immer를 사용한 트리 구조 데이터 처리 방법

1. Immer 패키지를 설치합니다.

npm install immer

1. Immer를 임포트합니다.

import produce from 'immer';

1. 트리 구조 데이터를 상태로 정의합니다.

const treeData = {
  id: 1,
  name: 'root',
  children: [
    {
      id: 2,
      name: 'child1',
      children: [
        {
          id: 4,
          name: 'grandchild1',
          children: []
        },
        {
          id: 5,
          name: 'grandchild2',
          children: []
        }
      ]
    },
    {
      id: 3,
      name: 'child2',
      children: []
    }
  ]
};

1. Immer의 produce 함수를 사용하여 상태를 변경합니다.

const updatedTreeData = produce(treeData, draft => {
  // 상태 변경 로직 작성
  draft.children[0].children.push({
    id: 6,
    name: 'grandchild3',
    children: []
  });
});

1. 변경된 상태를 확인합니다.

console.log(updatedTreeData);

위의 예제에서는 Immer를 사용하여 트리 구조 데이터에서 grandchild3를 추가하는 작업을 수행했습니다. Immer의 produce 함수는 기존 상태인 treeData를 변경하지 않고, 새로운 상태인 updatedTreeData를 반환합니다.

Immer를 사용하면 객체나 배열의 상태를 손쉽게 변경할 수 있으며, 불필요한 복사를 피해 성능을 향상시킬 수 있습니다.

#TechBlog #Immer #트리구조 #데이터처리