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

lex-kim

작성한 질문수

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

2-6) 컴포넌트 Preloading

React.lazy 컴포넌트는 실행되지 않는 건가요?

작성

230

호버시에 동적으로 import를 하는 방식을 사용할때,

코드 최상단에는 ImageModal import 구문을 포함한 콜백함수가 React.lazy의 인수로 들어가 있습니다.

const LazyImageModal = lazy(() => import("./components/ImageModal"));

그렇다면 호버시에 import를 한다면, 이때 ImageModal의 페이지를 import를 하고,

function handleMouseEnter(params) {
const temp = import("./components/ImageModal");
}

React.lazy로 된 컴포넌트(LazyImageModal)가 호출되었을때는, 이미 import가 호출되었다고 JS가 판단해서 lazy에 들어가있는 import 콜백함수는 호출되지 않는 프로세스 인건가요?

return (
<div className="App">
<Header />
<InfoTable />
<ButtonModal
onClick={() => {
setShowModal(true);
}}
onMouseEnter={handleMouseEnter}
>
올림픽 사진 보기
</ButtonModal>
<SurveyChart />
<Footer />
<Suspense fallback={null}>
{showModal ? (
<LazyImageModal
closeModal={() => {
setShowModal(false);
}}
/>
) : null}
</Suspense>
</div>
);

제가 헷갈려하는 부분은 React.lazy로 정의한 컴포넌트가 import를 호출할것 같은데
호버시때 미리 import한 값이 있어서, JS는 이미 import한 값이 있다고 판단해서 안가져 오는게 맞는지 궁금합니다.

그리고 아래의 코드는 왜 틀린 코드인지 궁금합니다 ㅠ

let LazyImageModal;

function App() {
const [showModal, setShowModal] = useState(false);

function handleMouseEnter(params) {
LazyImageModal = import("./components/ImageModal");
}
 
...
}

react devtools

답변 1

유동균

지식공유자

안녕하세요 lex-kim 님,

동적 import 에 대해서 질문을 주셨는데요,

여기서 이해하셔야 할 것은 흔히 우리가 사용하고 있는 import 'module' 또는 import * from 'module' 이 아닌 import('module') 이 표현식입니다.

import('module') 는 빌드 시에 모듈을 import 하는 것이 아닌, 런타임 시에 동적으로 모듈을 import 하며, 실제 module를 바로 리턴하는게 아니라 해당 모듈을 담고 있는(resolve 하는) Promise 객체를 반환합니다. 동적으로 모듈을 가져도는 동작은 시간이 소요되는 동작이기 때문에 이걸 비동기로 처리하기 때문입니다.

즉, 다음과 같이 사용해야 됩니다.

import('module')
.then((module) => {
// module을 사용하여 원하는 동작
});

하지만 여기서 저 module이 단순 유틸성 함수라면 상관없지만, 우리같이 컴포넌트라면 import가 된 시점에 setState 를 하여 React의 Render Cycle로 가져올 필요가 있겠죠?

그 과정을 쉽게 해주는 것이 React.lazy와 React.Suspense 입니다.

그리고 hover시 import를 해두면, 미리 해당 모듈을 네트워크를 통해 불러오게 되고 (사용하지는 않더라도)
다른 곳에서 lazy 안에서 import를 할 때는 이미 네트워크 상에서는 로드된 데이터를 바로 사용할 수 있으므로 시간이 단축됩니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다.

lex-kim

작성한 질문수

전체 Q&A

질문하기