React.lazy

[프론트엔드] 코드 스플리팅 [3]

3. React.lazy와 Suspense를 통한 컴포넌트 코드 스플리팅 코드 스플리팅(분할) 작업을 위해 리엑트에 내장된 기능으로 유틸함수인 React.lazy와 컴포넌트인 Suspense가 있습니다. 먼저 두개의 내장 기능에 대해서 알아 보겠습니다. 주의사항!! react v16.6 버전 이후부터 React.lazy와 Suspense 컴포넌트 사용이 가능합니다. 그 전 버전에서는 import 함수를 통해서 불러온다음, 컴포넌트 자체를 state에 넣는 방식으로 구현해야 합니다. (이전 글참고) 3.1 React.lazy와 Suspense React.lazy란? 컴포넌트를 렌더링하는 시점에서 비동기적으로 로딩할 수 있게 해 주는 유틸 함수입니다. Suspense란? 리액트 내장 컴포넌트. 코드 분할된 ..