SPA의 특징으로 처음 로딩할 때 모든 페이지의 정보를 로드해야 합니다. 이때 프로젝트의 규모가 크다면 로드하는데 많은 시간이 필요하므로 Code Spliting으로 필요한 페이지만 로드해 rendering 할 수 있게 했습니다.
현재는 페이지나 프로젝트의 규모가 크지 않지만 그럴 때를 대비해 @loadable/component를 이용해 Code Spliting으로 성능 개선을 했습니다.
import React from 'react'
import { Switch, Route, useLocation } from 'react-router-dom'
import { useTransition, animated } from 'react-spring'
import { ROUTES } from 'utils/constants'
import loadable from '@loadable/component'
const HOME = loadable(() => import('pages/Main'))
const RESULT = loadable(() => import('pages/Result'))
const FILTERS = loadable(() => import('pages/Filters'))
const NotFound = loadable(() => import('pages/NotFound'))
const Routes = () => {
const location = useLocation()
const transitions = useTransition(location, (location) => location.pathname, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
})
return transitions.map(({ item: location, props, key }) => (
<animated.div key={key} className="absolute w-full" style={props}>
<Switch location={location}>
<Route exact path={ROUTES.HOME} component={HOME} />
<Route path={ROUTES.RESULT} component={RESULT} />
<Route path={ROUTES.FILTERS} component={FILTERS} />
<Route component={NotFound} />
</Switch>
</animated.div>
))
}
export default Routes