MobX는 JavaScript 애플리케이션의 상태 관리를 간단하게 해주는 라이브러리입니다. 이번 글에서는 MobX에서 트랙(Track)이라는 개념에 대해 알아보겠습니다.

트랙이란?

트랙은 MobX에서 중요한 개념 중 하나로, 트랙을 사용하면 자동으로 관찰되는 값들을 추적할 수 있습니다. 이렇게 추적된 값들은 자동으로 변화에 반응하여 필요한 부분만 업데이트됩니다.

트랙 사용하기

MobX에서 트랙을 사용하기 위해서는 @observable을 사용하여 상태를 선언해야 합니다. 이렇게 선언된 상태는 MobX에 의해 추적되며, 값이 변경될 때 자동으로 트랙에 추가됩니다.

import { observable } from 'mobx';

class Store {
  @observable count = 0;
}

const store = new Store();

// 트랙된 값에 접근하기
console.log(store.count);

// 트랙된 값 변경하기
store.count = 1;

위의 예제에서 count는 @observable으로 선언되어 있습니다. 이렇게 선언한 상태는 자동으로 트랙되며, store.count를 통해 값을 읽거나 변경할 수 있습니다.

트랙의 자동 업데이트

트랙된 값은 자동으로 업데이트되어 관련된 부분만 다시 렌더링됩니다. 이를 위해 MobX에서는 @observer 데코레이터를 사용합니다.

import { observable, observer } from 'mobx-react';

@observer
class MyComponent extends React.Component {
  render() {
    return (
      <div>{this.props.store.count}</div>
    );
  }
}

위의 예제에서 MyComponent는 @observer 데코레이터로 래핑되어 있습니다. 이렇게 하면 count 값이 변경될 때만 해당 컴포넌트의 render 함수가 호출되어 업데이트됩니다.

결론

트랙은 MobX에서 상태 관리를 간단하게 해주는 핵심 개념입니다. 트랙을 사용하면 값의 변화를 추적하여 필요한 부분만 업데이트할 수 있어 애플리케이션의 성능을 향상시킬 수 있습니다.

더 자세한 내용은 MobX 공식 문서를 참고하세요.