dynamic import

React.lazy()React에서 코드 분할을 목적으로(Chunk 분리) 컴포넌트를 Dynamic Import 할 때 React.lazy() 함수를 사용한다. 컴포넌트가 필요한 시점에만 로드되기 때문에, 로딩 중 표시할 컴포넌트나 메시지는 를 활용하여 설정한다. 여러 개의 lazy 컴포넌트를 묶어서 fallback을 한 번에 표시할 수도 있다. 또한, React.lazy()로 불러오려는 컴포넌트는 기본적으로 default export를 사용해서 내보내야 한다.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// 컴포넌트 바디에서 호출하면 정상 작동하지 않으므로 주의co..

Intro1개 파일에 모든 코드가 들어간 것 보다 코드들이 잘개 쪼개져 있는게 더 좋다.모듈은 변수와 함수를 구성하는 더 좋은 방법을 제공한다.모듈을 잘 알아두면 코드를 깔끔하게 정리할 수 있다.모듈 덕분에 코드들을 작은 파일로 나눌 수 있고, import / export 할 수 있다.모듈은 함수와 변수를 모듈 스코프에 넣고, 모듈 스코프를 통해 모듈 함수 사이에서 변수를 공유할 수 있다.다이나믹 모듈을 이용하면 어플리케이션 로딩을 더 빠르게 할 수 있다. Named Exportimport { name } from "file"; 파일 혹은 모듈이 원하는 만큼의 named exports를 가질 수 있다import 하려는 이름은 export 했던 함수(변수) 이름과 같아야 한다 // math.jsexport..