React lazy로 랜더링 최적화하기

React lazy란?

const LazyComponent = lazy(load);

리액트의 lazy는 특정 컴포넌트가 처음 랜더링될 때 까지 해당 컴포넌트 코드의 로딩을 지연하는 기능을 제공합니다. 이러한 기능을 이용하여 자바스크립트 코드를 분할하고, 초기 로딩시 더 빠른 로딩이 가능하도록 할 수 있습니다. 즉 랜더링을 최적화할 수 있습니다.

React lazy 기본 문법

lazy(load)

lazy를 사용하기 위해선 파일의 최상단 스코프에서 lazy를 import해 주어야 합니다.

이후 lazy를 적용할 컴포넌트를 import할 때, 해당 컴포넌트의 import문을 다음과 같이 lazy 함수로 감싸주면 됩니다.

import { lazy } from 'react';

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

ℹ️ info
lazy를 적용할 컴포넌트는 반드시 default로 export된 컴포넌트여야 합니다.

Parameter : load

load는 Promise 혹은 Promise처럼 then 메서드를 가지고 있는 객체여야 합니다.

리액트는 해당 파일의 컴포넌트가 처음 랜더링 될 때 까지 load 파라미터를 호출하지 않습니다. 이후 컴포넌트가 랜더링되고 load가 호출이 되면, Promise가 resolve 될 때 까지 기다린 후 resolve된 값의 .default 프로퍼티의 리액트 컴포넌트를 랜더링합니다.

ℹ️ info
.default 프로퍼티가 리액트 컴포넌트인 객체로는
리액트 컴포넌트를 return하는 함수, 그리고 memo, forwardRef 등이 있습니다.

이렇게 랜더링된 lazy 컴포넌트는 캐시가 되기에, 한번 호출된 load는 다시 호출되지 않습니다. 즉 한번 랜더링된 lazy 컴포넌트는 다시 랜더링 될 때 Promise를 기다릴 필요 없이 바로 볼 수 있게 됩니다.

returns

lazy는 리액트 컴포넌트를 리턴합니다.

lazy 컴포넌트가 아직 로딩중인 동안에는 (즉 Promise가 아직 resolve되지 않았을 때) 해당 컴포넌트를 랜더링하는 로직이 일시중지(a.k.a suspend)됩니다. 이와 같이 컴포넌트가 로딩중에는 suspend되는 특성을 이용하여 리액트의 Suspense 컴포넌트를 통해 해당 컴포넌트가 로딩중임을 보여줄 수 있습니다.

컴포넌트를 lazy loading 하는 법 (with Suspense)

컴포넌트에 lazy loading을 적용하고, Suspense를 통해 로딩되는 동안 보여줄 컴포넌트를 정의하는 방법은 다음과 같습니다.

컴포넌트에 lazy 적용

import { lazy } from 'react';

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

ℹ️ info
lazy를 적용할 컴포넌트는 반드시 default로 export된 컴포넌트여야 합니다.

Suspense를 통해 로딩시 보여줄 컴포넌트 정의

import { Suspense } from 'react';
import Loading from './Loading.ts';

<Suspense fallback={<Loading/>}>
	<p>이 컴포넌트는 지연되어 로딩 됩니다.</p>
	<LazyComponent />
</Suspense>

전체 코드

import { lazy, Suspense } from 'react';
import Loading from './Loading.ts';
const LazyComponent = lazy(() => import('./LazyComponent.ts'));

<Suspense fallback={<Loading/>}>
	<p>이 컴포넌트는 지연되어 로딩 됩니다.</p>
	<LazyComponent />
</Suspense>

마무리

이번 글에서는 리액트의 lazy에 대해 알아보고, 해당 기능을 이용하여 컴포넌트가 첫 랜더링될 때 까지 해당 컴포넌트 코드의 로딩을 늦춰 랜더링을 최적화하는 방법에 대해 알아봤습니다.

lazy 기능을 적절히 이용하면 적절한 코드 분할이 가능해지면서 애플리케이션, 특히 SPA 애플리케이션의 초기 로딩 속도를 유의미하게 개선할 수 있습니다. 서비스의 초기 화면 랜더링 속도가 느리다면 리액트의 lazy를 도입하는 것을 고려해보는 것도 좋으리라 생각합니다 :D