[React] lazy 와 Suspense 이용해서 컴포넌트 동적으로 로딩하기

❓ React.lazy

React.lazy 는 컴포넌트를 동적으로 불러오기 위해 사용되는 함수이다.

이 함수는 컴포넌트를 import 해서 받아오고, 이걸 지연시켜서 로드할 수 있게 해준다.

 

쉽게 말하자면, lazy 는 게으르다는 뜻으로 실제로 컴포넌트가 필요할 때까지 로드를 미루는 역할을 한다.

예를 들어, 웹사이트에 여러 페이지가 있을 때, 사용자가 처음 들어올 때 모든 페이지를 한 번에 불러오는 게 아니라! 실제로 필요한 페이지나 컴포넌트만 불러오게 함으로써 초기 로딩 시간을 줄여준다.

이렇게 하면 사용자에게 더 빠른 경험을 제공할 수 있다.

 

❗️사용법 예시

import React, { lazy } from 'react'

const Home = lazy(() => import('@pages/home/Home.jsx'))

const router = [
  {
    path: '',
    element: <Home />
  }
]

export default router

이 코드에서 lazy 는 Home 컴포넌트를 동적으로 로드하고 있다.

이때, 컴포넌트가 실제로 필요할 때까지 로드를 지연시키므로 초기 페이지 로딩 시 불필요한 코드가 포함되지 않는다.

 

예를 들어, 모달 컴포넌트가 있다고 가정하자.

사용자가 페이지에 들어왔을 때 기본적으로 이 모달이 필요하지 않다면, lazy 를 사용하여 모달 컴포넌트를 사용자가 클릭할 때만 로드할 수 있다. 이렇게 하면 초기 로딩이 더 빠르고, 필요한 부분만 보여줄 수 있어서 효율적이다.

 

---

❓ React.Suspense

React.Suspense 는 lazy 로 지연 로드된 컴포넌트가 로드될 때까지 로딩 상태를 표시하는 역할을 한다.

Suspense 는 컴포넌트를 감싸고, fallback 속성을 통해 로딩 중 표시할 내용을 정의할 수 있다.

이걸 사용하면 컴포넌트를 불러오고 있을 때, 빈 화면이 아니라 로딩 화면을 보여주어서 사용자가 로딩 상태임을 인지할 수 있도록 도와주며, 더 나은 사용자 경험을 제공한다.

 

❗️ 사용법 예시

import React, { lazy, Suspense } from 'react';
import Loading from './Loading'; // 로딩 컴포넌트
import NotFound from './NotFound'; // 404 페이지 컴포넌트

const Home = lazy(() => import('@pages/home/Home.jsx'));

const router = [
  {
    path: 'home',
    element: (
      <Suspense fallback={<Loading />}>
        <Home />
      </Suspense>
    ),
    errorElement: <NotFound />
  }
];

export default router;

이 코드에서는 Home 컴포넌트가 로드되는 동안 Loading 컴포넌트가 사용자에게 표시된다.

이는 사용자가 로딩 상태를 인지할 수 있게 해주며, UI 에 빈 화면만 뜨지 않게 도와준다.

만약 Home 컴포넌트를 로드하는 중 오류가 발생한다면, errorElement 로 지정한 NotFound 컴포넌트가 표시된다.

 

---

❓ 왜 쓸까?

lazy 와 Suspense 를 사용하는 주된 이유는 성능과 사용자 경험을 개선하기 위해서이다.

모든 컴포넌트를 한 번에 로드하면 초기 로딩 속도가 느려지고 사용자 경험이 저하 될 수 있다.

이때, lazy 를 사용하면 컴포넌트를 필요할 때만 로드함으로써 초기 로딩 시간을 줄일 수 있다.

또한, Suspense 로 로딩 상태를 관리하여 사용자가 기다리는 동안 시각적으로 인식할 수 있도록 해준다.

 

---

📝 정리

1. React.lazy: 필요할 때만 컴포넌트를 로드하여 초기 로딩 시간을 줄인다.

2. React.Suspense: 로드 중 상태를 사용자에게 보여주어 시각적인 피드백을 제공한다.

3. 사용 이유: 성능과 사용자 경험을 향상시키기 위해 함께 사용된다.

 

---

💡 참고 문헌

https://ko.legacy.reactjs.org/docs/code-splitting.html

코드 분할 – React