React 공식문서 읽기 - 코드 분할

코드 분할

• 번들링은 훌륭하지만 앱이 커지면 번들도 커짐 => 초기화 로딩 비용 증가
• 그렇기 때문에 번들을 나누어야 함 = 코드 분할
• Webpack, Browserify 같은 번들러가 지원하는 기능
• 코드 분할을 통해 지연로딩하게 도와줌

React.lazy

• React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있음

// Before
import OtherComponent from './OtherComponent';

// After
const OtherComponent = React.lazy(() => import('./OtherComponent'));

• lazy 컴포넌트는 suspense 하위에서 렌더링 되어야 함
• 기다리는 동안 예비 컨텐츠를 보여줄 수 있음

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

function MyComponent() {
	return (
    	<div>
        	<Suspense fallback={<div>Loading...</div>}>
            	<section>
	            	<OtherComponent />
                    <AnotherComponent />
                </section>
            </Suspense>
        </div>
    );
}