React.lazy (1) 썸네일형 리스트형 React 공식문서 읽기 - 코드 분할 코드 분할 번들링은 훌륭하지만 앱이 커지면 번들도 커짐 => 초기화 로딩 비용 증가 그렇기 때문에 번들을 나누어야 함 = 코드 분할 Webpack, Browserify 같은 번들러가 지원하는 기능 코드 분할을 통해 지연로딩하게 도와줌 React.lazy React.lazy 함수를 사용하면 동적 import를 사용해서 컴포넌트를 랜더링 할 수 있음 // Before import OtherComponent from './OtherComponent'; // After const OtherComponent = React.lazy(() => import('./OtherComponent')); lazy 컴포넌트는 suspense 하위에서 렌더링 되어야 함 기다리는 동안 예비 컨텐츠를 보여줄 수 있음 import R.. 이전 1 다음