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

안녕하세요, 정세연님.

[1]
import 함수는 Promise를 반환하는 비동기 함수입니다. import한 모듈을 인자로 받아서 처리하는 식으로 사용죠.

import { add } from './math'

console.log('1 + 4 =', add(1, 4))

//-------------------

import('add').then((module) => {
  const { add } = module

  console.log('1 + 4 =', add(1, 4))
})

위 예시에서 위의 코드는 모듈을 정적 로딩을 한 경우고 아래는 동적 로딩을 한 경우입니다.

마찬가지로 단순히 컴포넌트를 동적으로 import 하면 Promise를 통해 컴포넌트 객체가 전달됩니다.
이때 리액트의 컴포넌트를 렌더링 할 때는 Promise를 통해 받아온 컴포넌트 객체를 Promise 밖으로 꺼내야 합니다.

이것을 도와주는 것이 바로 lazy 함수입니다.

정리하면, 동적 로딩은 import 함수만으로 충분합니다.
다만, 비동기한 컴포넌트 라이프사이클 내에서 동적 로딩한 컴포넌트를 제대로 전달받기 위해서는 lazy 함수를 사용해야 합니다.
물론, 본인이 lazy와 같은, Promise로 받은 컴포넌트 객체를 밖으로 빼는 함수를 직접 구현하셔도 됩니다.
(이것은 일반적인 API(비동기) 데이터를 로드하는 것과 비슷합니다.)

[2]

지연 로딩(lazy loading) 하는 경우, 사실 상 Suspense의 loading 분기를 타지 않을 겁니다.
다만, 지연 로딩되는 컴포넌트가 항상 미리 로드(import) 된다는 보장은 없습니다.
타이밍에 따라 제때 로드가 되지않아 바로 렌더링을 못할 수도 있습니다.
컴포넌트의 Preload가 완벽하게 보장된다면 상관없겠지만, 이런 경우는 드물기 때문에 Suspense를 항상 같이 써주시는게 좋습니다.

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