React : Lazy import을 통한 성능 개선

Lazy를 사용하면 웹 페이지에서 사용자가 실제로 보거나 필요로 할 때까지 리소스의 로드를 연기할 수 있다. 불필요한 네트워크 요청을 최소화하여 초기 페이지 로딩 속도를 개선할 수 있다.

 

Lazy

• import { lazy, Suspense } from 'react';
  
• const 변수명 = lazy(()=>import('파일주소'));
• <Suspense fallback={ 로드되는 동안 표시할 항목 }> </Suspense>
  lazy로 로드된 컴포넌트가 로드되는 동안 보여줄  컴포넌트나 요소를 fallback 속성에 지정한다.

 

(1) lazy와 suspense를 import한다.

import { lazy, Suspense, useState} from 'react';

 

(2) lazy import를 통해 컴포넌트를 동적으로 가져온다.

lazy import의 경우 컴포넌트 외부에서 lazy를 호출해야 한다. 

const ShowTextLazy = lazy(() => import('./components/ShowText'));

 

(3) Suspense를 통해 컴포넌트가 로드되는 동안 보여줄 컴포넌트나 요소를 설정한다.

  return (
    <>
      <textarea value={text} onChange={(e) => setText(e.target.value)}></textarea>
      <button onClick={handleShow}>Show</button>
      <Suspense fallback={<p>Loading...</p>}>
        {txt && <ShowTextLazy txt={txt} />}
      </Suspense>
    </>
  );

 

<<예제 전체 코드>>

<App.jsx>

import { Suspense, useState, lazy } from 'react';
import './App.css';

// 컴포넌트를 지연시키기 위해 promise 적용
const ShowTextLazy = lazy(() => new Promise(resolve => {
  setTimeout(() => resolve(import('./components/ShowText')), 2000)
}));

function App() {
  const [text, setText] = useState("");
  const [txt, setTxt] = useState("");

  const handleShow = () => {
    setTxt(text);
    setText("");
  };

  return (
    <>
      <textarea value={text} onChange={(e) => setText(e.target.value)}></textarea>
      <button onClick={handleShow}>Show</button>
      <Suspense fallback={<p>Loading...</p>}>
        {txt && <ShowTextLazy txt={txt} />}
      </Suspense>
    </>
  );
}

export default App;

 

<ShowText.jsx>

export default function ShowText({ txt }) {
  return <p>{txt}</p>;
}

로딩 되는 동안에 <Suspense>의 fallback에 지정되어있는 요소가 시행되는 모습을 볼 수 있다. 간단하게 보여주기 위해서 작성한 예제여서 요소를 직접적으로 넣었지만, 컴포넌트를 새로 생성하여 로딩 시의 화면을 작성하고 해당 컴포넌트로 지정할 수도 있다.