React.lazy()에 관하여...

최하영·2023년 1월 5일
0

react

목록 보기
1/1

react.lazy란

동적 import를 통해 컴포넌트를 손쉽게 javascript 청크로 분리 할 수 있도록 해주는 메서드

React 에서의 Javascript 청크 분리의 필요성

React는 기본적으로 첫 페이지를 로드할 때 어플리케이션 전체의 코드를 하나의 JS 번들로 넘겨주게 된다.
이 때문에 대규모 프로젝트에서는 첫 로드시 매우 큰 규모의 JS 번들을 사용자에게 전송하는데, 이는 페이지 성능에 큰 악영향을 끼칠 수 있기 때문이다.

lazy 기본 사용법

import React, { lazy } from 'react';

const LazyComponent = lazy(()=> import('./LazyComponent'));

const RenderingComponent = () => {
  return (
    		<div>
          		<LazyComponent />
          	</div>
         );
}

이처럼 기존 import 하는 방식과 다르게 lazy메서드 내에 import 해주는 함수를 등록하여 컴포넌트를 불러올 수 있다.
이러한 과정을 통해 react는 초기 페이지를 로드 할 때에는 필요한 부분만 번들링을 하게 되고, 사용자의 필요에 따라서 추가적으로 필요한 컴포넌트들을 불러 올 수 있다.

하지만 이 경우, 그때 그때 필요한 JS 번들을 받아온다는 점에서 사용자에게 약간의 지연이 생기게 된다.

이러한 현상 때문에 사용자에게 유연한 로딩 환경을 제공하는 것이 중요한데, 그러기 위하여 Suspense와 lazy를 함께 사용하는 것이 바람직하다.

profile
프론트 개발자를 꿈꾸는 애기 개발자

0개의 댓글