[javascript] MobX의 실수 예방 방법
MobX는 JavaScript 애플리케이션에서 상태 관리를 용이하게 해주는 강력한 라이브러리입니다. 하지만 적절한 사용법을 따르지 않으면 일부 문제가 발생할 수 있습니다. 이번 블로그 포스트에서는 MobX를 사용할 때 흔히 발생하는 실수를 예방하는 방법에 대해 알아보겠습니다.
1. Observable 상태 갱신에 주의하세요.
MobX에서는 관찰 가능한 observable 상태를 사용하여 상태가 변경될 때 자동으로 UI가 업데이트되도록 할 수 있습니다. 하지만 observable 상태를 다룰 때 주의해야 할 몇 가지 사항이 있습니다.
observable객체의 속성을 직접 수정하지 마세요. 대신,observable객체의set메서드를 사용하여 값을 업데이트하세요.observable객체의 속성을 업데이트할 때는 필요한 만큼의 정보만 업데이트하세요. 즉, 필요한 속성만 변경하고 나머지는 그대로 두세요. 이렇게 하면 불필요한 리렌더링을 방지할 수 있습니다.
import { observable } from "mobx";
const person = observable({
name: "John",
age: 30,
});
// 잘못된 방법: 직접 속성을 수정합니다.
person.name = "John Doe";
// 올바른 방법: set 메서드를 사용하여 속성을 업데이트합니다.
person.set("name", "John Doe");
// 필요한 만큼의 속성만 변경합니다.
person.set("age", 31);
2. Computed 속성을 올바르게 사용하세요.
MobX에서는 computed 속성을 사용하여 상태의 파생값을 계산할 수 있습니다. 하지만 computed 속성을 올바르게 사용하지 않으면 예상치 못한 동작이 발생할 수 있습니다.
computed속성에 의존하는observable속성을 변경할 때, 해당computed속성은 자동으로 재계산됩니다. 그러나computed속성에 직접 접근하여 값을 수정하지 않는 것이 좋습니다. 대신,observable속성을 변경하도록 하세요.
import { observable, computed } from "mobx";
const person = observable({
firstName: "John",
lastName: "Doe",
});
const fullName = computed(() => {
const { firstName, lastName } = person;
return `${firstName} ${lastName}`;
});
// 잘못된 방법: computed 속성에 직접 접근하여 값을 수정합니다.
fullName.set("John Smith");
// 올바른 방법: observable 속성을 변경하여 computed 속성을 자동으로 재계산합니다.
person.firstName = "John";
person.lastName = "Smith";
3. Observer 컴포넌트를 사용하여 리랜더링 성능을 개선하세요.
MobX에서는 observer 컴포넌트를 사용하여 자동으로 상태 변화를 감지하고 컴포넌트를 리렌더링할 수 있습니다. 하지만 observer 컴포넌트를 사용할 때 주의해야 할 몇 가지 사항이 있습니다.
observer컴포넌트의render메서드는 순수 함수여야 합니다. 즉, 컴포넌트 외부의 상태를 변경하거나 부작용을 일으키지 않아야 합니다.- 컴포넌트 내부에서
observable상태를 읽는 경우에만observer컴포넌트를 사용하세요. 즉,observable상태에 의존하지 않는 컴포넌트는observer로 감싸지 않아도 됩니다.
import { observer } from "mobx-react-lite";
const PersonInfo = observer(({ person }) => {
const { firstName, lastName } = person;
return <div>{`${firstName} ${lastName}`}</div>;
});
이렇게 MobX를 올바르게 사용하면 애플리케이션의 상태 관리와 리랜더링 성능을 향상시킬 수 있습니다. MobX의 공식 문서와 예제 코드를 참고하여 더 자세한 내용을 학습해보세요.