React.js Code Splitting

React.js Code Splitting

1. Code Splitting

   • 16.6 이후 React.lazy() 메소드를 이용해 코드분할을 좀 더 편리하게 할 수 있게 되었다
   • create-react-app 혹은 Webpack 과 같은 번들링 툴을 이용한다면 사용자가 따로 지정하지 않아도 번들링이 진행된다
   • 앱이 커질수록 번들도 커져 로딩시간이 길어지기 때문에 번들을 나누는 것이 좋다
   • React의 코드분할은 런타임시 필요한 번들을 동적으로 불러와 사용하기 때문에 Lazy Loading하게 해주며 메인 번들에서 벗어나게 해준다

   React.lazy, Suspense는 아직 서버 사이드 렌더링을 할수 없다. React는 서버에서 렌더링 된 앱에서 코드 분할을 하려면 Loadable Components를 추천하고 있다.

2. import()

   • 코드 분할에는 동적 import() 문법이 쓰인다
   • 이 특별한 문법으로 필요할 때만 import하는 것이 가능해진다

   const Posts = React.lazy(() => import('./xxx/xx경로'));
   

   
   

3. Suspense

   • lazy 컴포넌트는 Suspense 컴포넌트의 하위에서 렌더링되어야 한다
   • Suspense는 lazy 컴포넌트가 로드되길 기다리는 동안 로딩 화면과 같은 예비 컨텐츠를 보여줄 수 있게 해준다
   • fallback prop은 컴포넌트가 로드될 때까지 기다리는 동안의 예비 컨텐츠를 보여준다
   • React.lazy는 현재 default export만 지원하고 named export는 지원하지 않는다
   • 코드 분할은 Route level 에서 다른 페이지로 넘어갈 때 설정하거나 Component level에서 존재하지만 보이지 않는 컴포넌트를 불러올때, 또는 스크롤이 긴 하나의 페이지를 나눌 때 등에 사용하면 좋다

   <div>
   	<Suspense fallback={<div>Loading...</div>}>
       	<Posts />
       </Suspense>
   </div>
   

참고 자료

reactjs.org - 공식홈페이지

Udemy - React The Complete Guide

React.js 코드 분할(Code Splitting)