[javascript] Redux와 코드 스플리팅(Code Splitting)의 연동 방법은?

22 Nov 2023

javascript

Redux는 상태 관리 라이브러리로, 애플리케이션의 상태를 예측 가능하고 일관성 있게 관리할 수 있도록 도와줍니다. 반면에 코드 스플리팅은 애플리케이션의 번들 파일을 작은 조각으로 분할하여 초기 로딩 시간을 줄이는 기술입니다. 이 두 기술을 함께 사용하면 애플리케이션의 성능과 유지보수성을 개선할 수 있습니다.

Redux와 코드 스플리팅을 연동하는 방법은 다음과 같습니다.

Redux 청크 분할: Redux 코드 자체를 청크로 분할하는 것은 매우 간단합니다. Redux 코드는 보통 단일 파일에 작성되므로 이를 여러 청크로 분리할 수 있습니다.

import { createStore } from 'redux';

const store = createStore(() => {
  // reducer logic
});

export default store;

리덕스와 비동기 로딩: 비동기 모듈 로딩을 통해 리덕스와 연동된 모듈을 지연 로딩할 수 있습니다. 예를 들어, React의 lazy와 Suspense를 사용하여 비동기적으로 리덕스 모듈을 로딩할 수 있습니다.

import React, { lazy, Suspense } from 'react';

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

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

코드 스플리팅과 레지스트리: 코드 스플리팅을 사용하여 리덕스와 연결된 모듈을 분할한 경우, 이를 중앙화된 레지스트리에 등록해야 합니다. 이렇게 하면 필요할 때 동적으로 모듈을 로딩할 수 있습니다.

import { addReducer } from './reduxRegistry';

addReducer('asyncRedux', () => import('./asyncReduxReducer'));

위 코드에서 addReducer 함수는 주어진 리듀서를 레지스트리에 등록하는 역할을 합니다.

코드 스플리팅과 라우팅: 코드 스플리팅을 사용할 때는 라우팅과 함께 사용하는 것이 일반적입니다. 라우팅 라이브러리(예: React Router)를 사용하여 애플리케이션의 다른 라우트에 대한 코드 스플리팅을 설정할 수 있습니다.

const HomePage = lazy(() => import('./HomePage'));
const AboutPage = lazy(() => import('./AboutPage'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/" exact>
            <HomePage />
          </Route>
          <Route path="/about">
            <AboutPage />
          </Route>
        </Switch>
      </Suspense>
    </Router>
  );
}

이렇게 코드 스플리팅과 Redux의 연동 방법을 사용하면 애플리케이션의 초기 로딩 속도를 향상시키고 필요한 모듈을 동적으로 로딩하여 효율적인 애플리케이션을 구축할 수 있습니다.