[javascript] MobX의 코드 분할

04 Dec 2023

javascript

코드 분할은 모던 JavaScript 프로젝트에서 필수적인 요소입니다. 코드 분할을 통해 애플리케이션의 성능과 로딩 속도를 향상시킬 수 있습니다. MobX를 사용하는 경우, 코드 분할을 구현하는 방법에 대해 알아보겠습니다.

코드 분할 매커니즘

MobX에서 코드 분할을 구현하기 위해 대표적인 매커니즘은 동적 import와 import() 함수를 사용하는 것입니다. 이는 ECMAScript의 최신 기능 중 하나로, 모듈을 비동기적으로 로드할 수 있는 방법을 제공합니다.

코드 분할 예제

MobX 코드 분할을 예제를 통해 살펴보겠습니다. 아래는 간단한 MobX 애플리케이션의 코드입니다.

// store.js
import { observable, action } from 'mobx';

class Store {
  @observable counter = 0;

  @action increment() {
    this.counter += 1;
  }
}

export default new Store();

// App.js
import React from 'react';
import { observer } from 'mobx-react';
import store from './store';

const App = observer(() => {
  return (
    <div>
      <h1>{store.counter}</h1>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
});

export default App;

위의 코드는 store.js 파일에서 Store 클래스를 정의하고, App.js 파일에서 store 객체를 사용하여 카운터를 화면에 표시하고 증가시키는 기능을 구현한 것입니다.

이제 코드 분할을 적용해보겠습니다. App.js 파일에서 MobX를 사용하는 코드를 따로 분리하여 동적으로 로드할 수 있습니다.

// App.js
import React, { lazy, Suspense } from 'react';

const AsyncApp = lazy(() => import('./AsyncApp'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <AsyncApp />
      </Suspense>
    </div>
  );
};

export default App;

위의 코드에서 lazy 함수를 사용하여 ./AsyncApp 파일을 동적으로 로드합니다. 이후 Suspense 컴포넌트를 사용하여 로딩 중일 때 보여줄 내용을 설정하고, AsyncApp 컴포넌트를 렌더링합니다.

AsyncApp.js 파일에는 이전에 App.js에 있던 MobX 코드를 넣어줍니다.

// AsyncApp.js
import React from 'react';
import { observer } from 'mobx-react';
import store from './store';

const AsyncApp = observer(() => {
  return (
    <div>
      <h1>{store.counter}</h1>
      <button onClick={store.increment}>Increment</button>
    </div>
  );
});

export default AsyncApp;

이제 App.js 파일은 코드 분할을 적용하여 MobX 코드를 비동기적으로 로드하는 역할을 하게 됩니다.

결론

MobX의 코드 분할을 통해 애플리케이션의 성능과 로딩 속도를 향상시킬 수 있습니다. 동적 import와 import() 함수를 사용하여 MobX 코드를 필요한 시점에 로드할 수 있습니다. 코드 분할은 대규모 애플리케이션의 유지 보수와 성능 개선에 중요한 역할을 합니다.

코드 분할 매커니즘

코드 분할 예제

결론

참고 자료