[React] lazy loading

✏️ 들어가기 전에

지금 진행하는 프로젝트를 배포했는데, 사진 렌더링이 너어어ㅓ어어어ㅓ어ㅓ어어어무 느려서 당황..
최적화시키는 방법을 찾아보다가 가장 대표적인 방법이 lazy loading을 사용하는 방법이라고 해서 한 번 알아보려고 한다.

💡 시작하기

공식문서에는 이렇게 시작한다

lazy를 사용하면 컴포넌트의 코드가 최초로 렌더링될 때까지 로딩을 미룰 수 있다.

const SomeComponent = lazy(load)

lazy loading은 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 성능을 최적화한다. 쉽게 말하면 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이라고 생각하면 된다.

😄 왜 lazy loading을 사용하는가?

위에서 말했듯이, lazy loading은 페이지 내에서 실제로 필요할 때까지 리소스의 로딩을 미룬다.
이는 즉, 페이지를 초기에 로딩할 때 필요로 한 이미지의 수가 줄어든다는 뜻과 같다.

리소스 요청을 줄이기 때문에 그만큼 리소스들을 더 빠르게 처리해서 다운로드하도록 확보한다. 이로 인해 성능이 향상된다.

 

그럼 언제 적용해?

화면에 보여지지 않는 이미지, 즉 뷰포트에 들어오지 않는 이미지들은 Lazy loading을 적용하면 된다.

⚙️ Reference

lazy(load)

컴포넌트 외부에서 lazy를 호출하여 lazy loading을 선언한다.

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

우리가 평소에 코드 최상단에 정적으로 import하는 것과 달리,

lazy loading의 경우, 특정 컴포넌트를 동적으로 import한다.

내가 원할 때 불러올 수 있는 것이다.

🖥️ Suspense와 함께 Lazy-loading 사용하기

근데 Suspense가 머지?

Suspense는 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 메커니즘이라고 볼 수 있다.

그리고 기다리는 동안 대신 보여줄 컴포넌트를 fallback 속성을 통해 설정해주면 된다.

 

↓ 전체 코드

import { useState, Suspense, lazy } from 'react';
import Loading from './Loading.js';

const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js')));

export default function MarkdownEditor() {
  const [showPreview, setShowPreview] = useState(false);
  const [markdown, setMarkdown] = useState('Hello, **world**!');
  return (
    <>
      <textarea value={markdown} onChange={e => setMarkdown(e.target.value)} />
      <label>
        <input type="checkbox" checked={showPreview} onChange={e => setShowPreview(e.target.checked)} />
        Show preview
      </label>
      <hr />
      {showPreview && (
        <Suspense fallback={<Loading />}>
          <h2>Preview</h2>
          <MarkdownPreview markdown={markdown} />
        </Suspense>
      )}
    </>
  );
}

// Add a fixed delay so you can see the loading state
function delayForDemo(promise) {
  return new Promise(resolve => {
    setTimeout(resolve, 2000);
  }).then(() => promise);
}

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
</Suspense>

위 코드의 경우, Suspense 안에 있는 컴포넌트들이 뜰 때까지, Loading 컴포넌트를 띄운다는 뜻이다.

MarkdownPreview 컴포넌트가 뜨면 Loading 컴포넌트가 사라진다.

📝 정리

흠.. 아무래도 뷰포트를 넘어가는 이미지만 lazy loading이 효과있는 것 같은데, 일단 내가 진행하는 프로젝트에는 그런 게 없어서 적용은 못 할 듯 싶다..🥲 하지만 이미지 최적화에 대해 예전부터 궁금했기에, 그 궁금증 중 일부가 해소된 것 같아 좋다! 다른 프로젝트에서 뷰포트를 넘어가는 이미지나 비디오 태그가 있다면 바로 적용해볼 것이다🤩

🔗 참고

https://react.dev/reference/react/lazy#suspense-for-code-splitting

https://helloinyong.tistory.com/297