중첩된 배열을 조작하고 업데이트하는 것은 종종 복잡하고 번거로운 일일 수 있습니다. 그러나 Immer라는 라이브러리를 사용하면 이러한 작업을 간단하게 수행할 수 있습니다. Immer는 불변성을 유지하면서 상태를 변경할 수 있는 기능을 제공해줍니다.

Immer란?

Immer는 JavaScript의 immutable (변경 불가능한) 데이터를 조작하는데 도움을 주는 라이브러리입니다. 이를 통해 객체와 배열의 상태를 변경하거나 업데이트할 수 있습니다. Immer는 내부에서 Proxy를 사용하여 변경 사항을 추적하므로 원본 데이터를 간단히 수정할 수 있습니다.

중첩된 배열 조작하기

Immer를 사용하여 중첩된 배열을 조작하는 방법을 알아보겠습니다.

1. 배열에 요소 추가하기

const state = [1, 2, [3, 4]];
const newState = immer.produce(state, draft => {
  draft[2].push(5);
});

위의 예제에서는 state 배열에서 3번째 요소의 내부 배열에 5를 추가하는 방법을 보여줍니다. Immer의 produce 함수를 사용하여 변경 사항을 적용한 새로운 상태를 생성합니다.

2. 배열의 요소 수정하기

const state = [1, 2, [3, 4]];
const newState = immer.produce(state, draft => {
  draft[2][0] = 10;
});

위의 예제에서는 state 배열에서 3번째 요소의 첫 번째 요소를 10으로 수정하는 방법을 보여줍니다. Immer를 사용하면 간단하게 원하는 요소를 수정할 수 있습니다.

3. 배열의 요소 제거하기

const state = [1, 2, [3, 4]];
const newState = immer.produce(state, draft => {
  draft[2].splice(0, 1);
});

위의 예제에서는 state 배열에서 3번째 요소의 첫 번째 요소를 제거하는 방법을 보여줍니다. Immer의 splice 함수를 사용하여 원하는 요소를 제거할 수 있습니다.

위의 예제들은 Immer를 사용하여 중첩된 배열을 조작하는 간단한 방법을 보여줍니다. Immer는 복잡한 상태 관리 작업을 단순화시키고 코드를 깔끔하게 유지할 수 있는 강력한 도구입니다.

#Immer #JavaScript