제목: Immer를 사용하여 JavaScript에서 객체의 깊은 복사 탐색하기
Immer 소개
Immer는 React 및 Redux 애플리케이션에서 일반적으로 사용되는 강력한 JavaScript 라이브러리로, 상태 관리를 단순화하고 불변성을 촉진하는 데 사용됩니다. 그러나 Immer가 변형하지 않고 객체를 깊은 복사할 수 있는지 궁금한 적이 있나요? Immer의 동작을 살펴보고 가능한 해결책을 탐색해봅시다.
Immer의 Produce 함수 이해
공식 Immer README에서는 produce 함수에 빈 함수를 전달하면 원래 상태의 깊은 복사본이 반환된다고 처음에 제시합니다. 그러나 이것은 완전히 정확하지 않습니다.
import { produce } from 'immer';
const state = {
hello: 'world',
};
const nextState = produce(state, draft => {});
// 출력: { hello: "new world" }
console.log(state, nextState);
위의 코드 스니펫에서 보듯이 produce 함수는 객체의 의미있는 깊은 복사본을 생성하지 않습니다. 대신, draft 함수 내에서 변경 사항이 없을 경우 이를 최적화하여 이전 상태를 반환합니다.
Immer로 깊은 복사 생성하기
Immer를 사용하여 객체의 깊은 복사본을 얻으려면, Lodash와 같은 유틸리티 라이브러리를 사용하여 객체를 복제하는 사용자 정의 함수를 만들 수 있습니다.
import _ from 'lodash';
export default function produceClone(object, modifyFunction) {
let objectClone = _.cloneDeep(object);
if (!modifyFunction) return objectClone;
modifyFunction(objectClone);
return objectClone;
}
produceClone 함수는 초기 객체와 수정 함수를 입력받는데, 수정 함수를 사용하여 복제된 객체를 원하는 대로 업데이트할 수 있습니다. 수정 사항을 가하든 말든, 매번 새로운 깊은 복제된 객체가 반환됩니다.
복제된 객체 테스트하기
produce 함수와 사용자 정의 produceClone 함수의 동작을 비교해 복제된 객체를 수정해봅시다.
const state = {
hello: 'world',
};
const nextState = produceClone(state, draft => {
draft.hello = 'new world';
});
nextState.hello = 'newer world';
console.log(state, nextState);
위의 코드는 TypeError: "world"는 읽기 전용 오류를 출력하며, 복제된 객체를 수정할 수 없음을 나타냅니다. 이는 우리의 사용자 정의 produceClone 함수가 실제로 변경 불가능한 깊은 복제된 객체를 생성함을 보여줍니다.
Immer와 클래스 인스턴스의 한계
Immer는 클래스 인스턴스를 다룰 때 제한 사항이 있음을 명심할 가치가 있습니다. 예를 살펴봅시다:
class Cls {
prop = 10;
}
const instance = new Cls();
const obj = {
r: instance,
};
const newObj = produce(obj, draft => {
draft.r.prop = 15;
});
console.log(obj, newObj);
위의 코드 스니펫은 r: Object { prop: 15 }라는 출력을 가져옵니다. 결과적으로 Immer는 클래스 인스턴스의 변경을 제대로 처리하지 못합니다.
결론
결론적으로, Immer의 produce 함수는 객체의 깊은 복사본을 제공하지 않지만, 사용자 정의 produceClone 함수를 사용하는 대체 접근 방식을 탐색했습니다. 이 함수를 사용하면 수정을 가하든 말든 일관된 방식으로 깊은 복제된 객체를 얻을 수 있습니다. 그러나 특히 클래스 인스턴스와 작업할 때 Immer의 한계를 명심하는 것이 중요합니다.
Immer의 동작을 이해하고 우리의 특정 요구에 맞는 솔루션을 구현함으로써, JavaScript 코드를 향상시키고 상태 변환과 객체 복사를 효과적으로 관리할 수 있습니다.
이 블로그 포스트를 읽어주셔서 감사합니다! 아래에 댓글이나 질문을 자유롭게 남겨주세요.
참고 자료 :
https://stackoverflow.com/questions/54999078/deepcopy-object-in-javascript-using-immer
같은 카테고리의 다른 글 보기 :
