[React] 리액트 코드 스플리팅 (code splitting)

첫 글로 뭘 쓸까 고민을하다가 요즘 리액트를 많이 사용하시니 리액트에 도움이 되는걸 써보려고합니다. 바로 코드스플리팅 인데요.

다들 프로젝트가 처음에는 작게 시작되었다가 점점 요구사항이 많아지고 기능들이 추가되고 페이지가 추가되며 프로젝트가 거대해지는 경험을 해보셨을거라 생각합니다.

바로 그때 필요한부분이 code splitting(코드분할)인데요.

원리는 코드를 잘게 chunk 단위로 쪼개서 해당 컴포넌트를 로드할때 사용되는 해당 js파일을 동적으로 불러오는 방식입니다.

사실 리액트에서 code splitting에 관련된 부분들을 쉽게 구현할수있도록 이미 제공을 해주고있어서 페이지 단위로 라우팅이 이미 나뉘어져있다면 훨씬 편하게 작업이 가능합니다.

자 그럼 어떻게 진행하는지 한번 보겠습니다.

어느정도 프로젝트 구성이 되어있다는 가정하에 예시로 구현한 것이므로 (다들 성능 최적화를 고민할 정도면 프로젝트 구성이 되었다고 가정하겠습니다.) 상황에 맞게 적용하시면 됩니다.

router/index.js

import { lazy } from 'react'

const HomeComponent = lazy(() => import('page/HomeComponent'))
const AboutComponent = lazy(() => import('page/AboutComponent'))
const OtherComponent = lazy(() => import('page/OtherComponent'))

let routes = [
  { redirect: true, path: "/", to: "/home" },
  { redirect: false, path: "/home", component: HomeComponent },
  { redirect: false, path: "/about", component: AboutComponent },
  { redirect: false, path: "/other", component: OtherComponent }
]

라우터를 위와 같이 구성하였습니다.

App.js

import React, { Component, Suspense } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom'

import routes from 'router'

class App extends Component {
  render() {
    return (
      <Suspense fallback={<div>...Loading</div>}>
      	<Switch>
          {routes.map((prop, index) => {
              if (prop.redirect) {
                return (
                  <Redirect 
                    exact 
                    from={prop.path} 
                    to={prop.to} 
                    key={index} 
                   />
                )
              } else {
                return (
                  <Route
                    key={index}
                    path={prop.path}
                    component={prop.component}
                  />
                )
              }
          })}
        </Switch>
      </Suspense>
    )
  }
}

export default App;