인프런 커뮤니티 질문&답변

Tae-Hui Kim님의 프로필 이미지
Tae-Hui Kim

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

1-9) Code Splitting & Lazy Loading

default export가 아닌 named export일 때 lazy사용법

해결된 질문

작성

·

780

1


ListPage컴포넌트가
export default ListPage가 아니라


const ListPage = () => { ... }
export {ListPage}

처럼 한 경우에는 어떻게 import 해야 하나요?

 

답변 1

1

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요, Tae-Hui Kim님

기본적인 원리를 이해하시면 쉽습니다.

코드에서 작성한 import 구문(import('./pages/ListPage/index'))은 최종적으로 { default: 해당 컴포넌트 } 를 리턴합니다.
즉, named export일 경우에는 위와 같은 형태를 맞춰주면 됩니다.

const ListPage = lazy(() =>
  import("./pages/ListPage/index").then(({ ListPage }) => ({
    default: ListPage,
  }))
);
const ViewPage = lazy(() =>
  import("./pages/ViewPage/index").then(({ ViewPage }) => ({
    default: ViewPage,
  }))
);

그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

Tae-Hui Kim님의 프로필 이미지
Tae-Hui Kim

작성한 질문수

질문하기