상태 관리 라이브러리 MobX는 관찰 가능한 상태를 효과적으로 관리하고 반응적인 반영을 가능하게 하는 데 사용됩니다. TypeScript와 MobX를 함께 사용하면 상태의 변화를 추적하고 타입을 보장할 수 있습니다.

깊은 복사와 참조 비교

MobX를 사용하면 상태의 변경 사항을 자동으로 감지하고 관련된 반응을 수행합니다. 그러나 때로는 객체 또는 배열과 같은 중첩된 구조의 데이터를 변경할 때 깊은 복사가 필요할 수 있습니다. TypeScript와 함께 MobX를 사용하면 깊은 복사와 상태 비교에 대해 조심스럽게 다뤄야 합니다.

아래는 TypeScript와 MobX를 함께 사용하여 깊은 복사와 참조 비교를 하는 간단한 예제입니다.

import { observable, makeObservable, action, comparer } from 'mobx';

class Todo {
  @observable deepData = { a: 1, b: 2 };

  constructor() {
    makeObservable(this);
  }

  @action
  updateDeepData() {
    this.deepData = { a: 1, b: 2 }; // 이와 같은 경우, 새로운 객체를 할당하여 참조가 변경됩니다.
  }
}

const todo = new Todo();

// comparer를 사용하여 객체의 깊은 비교를 수행합니다.
const isEqual = comparer.structural(todo.deepData, { a: 1, b: 2 });
console.log(isEqual); // false

위의 예제에서 comparer.structural()을 사용하여 deepData 속성의 변경을 감지하고, 새로운 객체와 이전 객체를 비교하여 참조가 변경되었는지 여부를 확인합니다.

결론

TypeScript와 MobX를 함께 사용하면 상태 변화를 안전하게 추적하고, 깊은 복사와 참조 비교를 통해 상태를 효과적으로 관리할 수 있습니다. 이를 통해 안정적이고 효율적인 상태 관리를 구현할 수 있습니다.

참고 문헌: MobX 공식 문서 - comparer