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

안녕하세요, 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,
  }))
);

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