리액트에서 상태 관리를 위해 MobX를 사용하는 경우, 컴포넌트의 렌더링 성능을 최적화하는 방법을 알아보겠습니다. MobX는 효율적인 상태 업데이트와 자동으로 리렌더링되는 컴포넌트를 제공하기 때문에, 올바른 방식으로 사용하면 성능을 높일 수 있습니다.
1. 컴포넌트 상태 관리하기
MobX를 사용하여 컴포넌트의 상태를 관리하는 가장 기본적인 방법은 @observable 데코레이터를 사용하여 상태 변수를 선언하는 것입니다. 이렇게 선언된 변수는 MobX의 관찰 대상이 되며, 해당 변수가 변경될 때 컴포넌트를 리렌더링합니다.
import { observable } from 'mobx';
class MyComponent extends React.Component {
@observable count = 0;
render() {
return <div>{this.count}</div>;
}
}
2. 컴포넌트 최적화하기
리액트 컴포넌트를 최적화하는 방법 중 하나는 shouldComponentUpdate 메서드를 사용하여 변경 사항을 검사하는 것입니다. MobX에서는 이를 간단하게 해결하기 위해 @observer 데코레이터를 사용할 수 있습니다. @observer를 컴포넌트 클래스에 추가하면, MobX가 자동으로 shouldComponentUpdate를 구현해줍니다.
import { observer } from 'mobx-react';
@observer
class MyComponent extends React.Component {
@observable count = 0;
render() {
return <div>{this.count}</div>;
}
}
이렇게 작성된 컴포넌트는 상태가 변경될 때만 리렌더링되므로, 효율적인 렌더링이 이루어집니다.
3. 컴포넌트 내에서 상태 변경하기
MobX에서는 @observable 변수의 값을 변경할 때 @action 데코레이터를 사용해야 합니다. @action을 사용하여 상태 변경이 추적되고, 해당 변경에 따른 리렌더링이 자동으로 처리됩니다.
import { observable, action } from 'mobx';
class MyComponent extends React.Component {
@observable count = 0;
@action
incrementCount() {
this.count++;
}
render() {
return (
<div>
<div>{this.count}</div>
<button onClick={this.incrementCount}>+</button>
</div>
);
}
}
상태 변경이 필요한 메서드에 @action을 추가하면, 해당 메서드에서 상태 값을 변경할 수 있습니다.
4. 컴포넌트 외부에서 상태 변경하기
MobX를 사용하면 상태 값을 직접 변경하는 대신, 액션을 통해 상태를 변경할 수도 있습니다. 액션은 상태를 변경해야 하는 경우에 사용되며, 상태 변경을 추적하고 컴포넌트를 자동으로 리렌더링합니다.
import { observable, action } from 'mobx';
class CounterStore {
@observable count = 0;
@action
incrementCount() {
this.count++;
}
}
const counterStore = new CounterStore();
@observer
class MyComponent extends React.Component {
render() {
return (
<div>
<div>{counterStore.count}</div>
<button onClick={counterStore.incrementCount}>+</button>
</div>
);
}
}
별도의 상태 관리 클래스를 작성하여 컴포넌트의 상태를 관리하면, 여러 컴포넌트에서 동일한 상태를 사용할 수 있습니다.
마무리
이렇게 MobX를 사용하여 리액트 컴포넌트의 상태를 관리하고 최적화하는 방법을 살펴보았습니다. MobX는 상태 업데이트와 리렌더링을 효율적으로 처리할 수 있는 강력한 도구이므로, 적절히 활용하여 리액트 애플리케이션의 성능을 향상시킬 수 있습니다.
#React #MobX