JavaScript를 사용하면 개체를 변경할 수 있지만 우리 자신(및 동료 프로그래머)이 그렇게 하도록 허용하지 않을 수 있습니다. 오늘날 JavaScript 세계에서 이에 대한 가장 좋은 예 중 하나는 React 애플리케이션에서 상태를 설정할 때입니다. 현재 상태의 새 복사본이 아닌 현재 상태를 변경하면 진단하기 어려운 문제가 발생할 수 있습니다.

이 게시물에서 우리는 객체 돌연변이를 방지하기 위해 우리 자신의 불변 프록시 함수를 굴립니다!

이 게시물이 마음에 든다면 💓, 🦄 또는 🔖를 주고 다음을 고려하십시오.

가입 my free weekly dev newsletter

구독 중

객체 돌연변이란 무엇입니까?

간단히 살펴보자면, 객체 변형은 객체 또는 배열의 속성을 변경할 때입니다. 이것은 완전히 다른 객체 참조를 가리키는 재할당과 매우 다릅니다. 다음은 돌연변이 대 재할당의 몇 가지 예입니다.

// Mutation
const person = { name: "Bo" };
person.name = "Jack";

// Reassignment
let pet = { name: "Daffodil", type: "dog" };
pet = { name: "Whiskers", type: "cat" };

그리고 우리는 이것이 배열에도 적용된다는 것을 명심해야 합니다.

// Mutation
const people = ["Jack", "Jill", "Bob", "Jane"];
people[1] = "Beverly";

// Reassignment
let pets = ["Daffodil", "Whiskers", "Ladybird"];
pets = ["Mousse", "Biscuit"];

개체 돌연변이의 의도하지 않은 결과의 예

이제 돌연변이가 무엇인지 알았으니 돌연변이가 어떻게 의도하지 않은 결과를 초래할 수 있습니까? 다음 예를 살펴보겠습니다.

const person = { name: "Bo" };
const otherPerson = person;
otherPerson.name = "Finn";

console.log(person);
// { name: "Finn" }

맞아요! person 와 otherPerson 모두 같은 객체를 참조하고 있으므로 name 에서 otherPerson 를 변경하면 person 에 액세스할 때 해당 변경 사항이 반영됩니다.

우리 자신(그리고 우리 프로젝트의 동료 개발자들)이 이와 같은 객체를 변경하도록 하는 대신에 오류가 발생하면 어떻게 될까요? 이것이 바로 우리의 불변 프록시 솔루션이 필요한 곳입니다.

불변 프록시 솔루션

JavaScriptProxy 객체는 우리가 사용할 수 있는 편리한 메타 프로그래밍 비트입니다. 이를 통해 해당 객체의 getter 및 setter와 같은 사용자 정의 기능으로 객체를 래핑할 수 있습니다.

변경할 수 없는 프록시의 경우 객체를 가져와 해당 객체에 대한 새 프록시를 반환하는 함수를 만들어 보겠습니다. 해당 객체의 속성을 get 시도할 때 해당 속성이 객체 자체인지 확인합니다. 그렇다면 재귀적 방식으로 변경할 수 없는 프록시로 래핑된 해당 속성을 반환합니다. 그렇지 않으면 속성을 반환합니다.

프록시된 개체의 값을 set 시도할 때 사용자에게 이 개체의 속성을 할 수 없음을 알리는 오류가 발생합니다set.

다음은 작동 중인 불변 프록시 기능입니다.

const person = {
  name: "Bo",
  animals: [{ type: "dog", name: "Daffodil" }],
};

const immutable = (obj) =>
  new Proxy(obj, {
    get(target, prop) {
      return typeof target[prop] === "object"
        ? immutable(target[prop])
        : target[prop];
    },
    set() {
      throw new Error("Immutable!");
    },
  });

const immutablePerson = immutable(person);

const immutableDog = immutablePerson.animals[0];

immutableDog.type = "cat";
// Error: Immutable!

그리고 거기에 우리는 그것을 가지고 있습니다. 우리는 불변 객체의 속성을 변경할 수 없습니다!

프로덕션에서 이것을 사용해야 합니까?

아니, 아마 아닐 것이다. 이러한 종류의 연습은 학문적으로는 훌륭하지만 동일한 작업을 수행하는 모든 종류의 훌륭하고 강력하며 잘 테스트된 솔루션이 있습니다(예: ImmutableJS 및 ImmerJS). 앱에 불변 데이터 구조를 포함시키려면 이 멋진 라이브러리를 확인하는 것이 좋습니다!

이 게시물이 마음에 든다면 💓, 🦄 또는 🔖를 표시하고 다음 사항을 고려하세요.

가입 my free weekly dev newsletter

구독 중