[React] React Suspense란?

오늘은 컴공생들이 은근 모르는 👾 React Suspense 👾에 대해서 소개하고 설명하고자 한다.

웹개발을 하다보면 데이터 로딩 속도로 인해 사용자 경험이 저하되는 문제가 생기곤한다.

물론 사이즈가 작은 프로젝트를 하면 이 문제에 대해 심각성을 못 느낄 수 있다고 생각한다!

 

하지만 "대용량 데이터"를 다루는 경우엔 상황이 다르다. => 이럴 땐 로딩 속도가 더욱 중요한 요소로 작용한다.

이럴 때에는 어떻게 해야될까?라고 생각하며 구글링을 하다가 찾은 것은 바로 React Suspense였다!

이러한 데용량 데이터를 다루는 상황에서 React Suspense를 활용하면 데이터 로딩 상태를 보다 세련되게 처리할 수 있다!

---

React Suspense

React Suspense는 React 16.6부터 도입된 기능으로, 컴포넌트가 렌더링되기 전에 데이터 로딩을 기다릴 수 있게 해준다.

이를 통해 데이터 로딩 중에도 자연스로운 사용자 경험을 유지할 수 있다.

(또한! 코드 스플리팅(Code Splitting)과 함께 사용하면 초기 로딩 속도를 개선하는 데에도 도움이된다.)

Suspense를 사용하면 로딩 상태를 선언적으로 처리할 수 있어 코드의 가독성과 유지보수성 증가에도 도움이 된다!

---

React Supsense의 개념과 핵심 기능

Suspense의 핵심 개념으로는 lazy와 fallback이 있다.

1. lazy는 동적 임포트를 통해 컴포넌트를 필요한 시점에 로드하는 기능 -> 이를 통해 초기 번들 크기를 줄임
2. fallback은 컴포넌트가 로딩 중일 때 보여줄 UI를 설정하는 prop으로서 fallback으로는 로딩 스피너, 스켈레톤 UI등을 활용할 수 있다. -> 이를 통해 사용자에게 콘텐츠가 로딩 중임을 알림.

---

React Suspense를 사용해야 하는 이유

그럼 왜 React Suspense를 사용해야 할까?

 

데이터 로딩 상태를 선언적으로 처리하여 깔끔한 데이터 로딩 처리가 가능하다.

// Suspense 사용 전
function App() {
	const [data, setData] = useState(null);
    
    useEffect(() => {
    	fetchData().then((result) => setData(result));
    }, []);
    
    if (!data) {
    	return <div>로딩 중...</div>;
    }
    
    return <div>{data}</div>;
}

// Suspense 사용 후
const DataComponent = lazy(() => import('./DataComponent'));

function App() {
	return (
    	<Suspense fallback={<div>로딩 중...</div>}>
        	<DataComponent />
        </Suspense>
    );
};

한눈에 봐도 너무 🌟 깔끔쓰 🌟하다!

 

---

React Suspense 적용하기

1. Suspense 사용 준비

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

 

2. lazy로 컴포넌트 동적 로딩 => lazy 함수를 사용하여 동적으로 로드할 컴포넌트를 감싸준다.

// 로딩 예시를 위하여 Promise를 사용하여 2초 뒤에 MyComponent를 import하도록 하엿다.
const MyComponent = lazy() => new Promise((resolve) =>
	setTimeout(() => resolve(import('./MyComponent')), 2000)));

 

3. Suspense로 로딩 UI 제공 => Suspense 컴포넌트로 lazy 컴포넌트를 감싸고, fallback prop으로 로딩 중 보여줄 UI를 설정한다.

<Suspense fallback={<div>로딩중...</div>}>
	<MyComponent />
</Suspense>;

 

4. 커스텀 로딩 컴포넌트 제작 => fallback에는 단순한 텍스트 뿐만 아니라 커스텀 컴포넌트를 제공할 수 있다.

import React from 'react';
import Spinner from './assets/Spinner.gif';

function LoadingSpinner() {
	return (
    	<div>
        	<h1>Loading...</h1>
            <img src={Spinner} alt="Loading..." width="10%" />
        </div>
    );
}

export default LoadingSpinner;

//커스텀 로딩 컴포넌트 적용
<Suspense fallback={<LoadingSpinner />}>
	<MyComponent />
</Suspense>

 

전체코드

App.js => Suspense와 lazy를 사용하여 MyComponent.js란 컴포넌트가 렌더링 되기 전에 로딩화면을 구현하는 파일

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


 import LoadingSpinner from './LoadingSpinner.js';


 // 로딩 예시를 위하여 Promise를 사용하여 2초 뒤에 MyComponent를 import하도록 하였다.
 const MyComponent = lazy(() => new Promise((resolve) =>
    setTimeout(() => resolve(import('./MyComponent')), 2000)));


 function App() {
    return (
        <div>
            <Suspense fallback={<LoadingSpinner />}>
                <MyComponent />
            </Suspense>
        </div>
    );
 }
 export default App;

 

Mycomponent.js => App.js에서 로딩 후 렌더링 될 파일

 function MyComponent() {
    return (
        <div>
            <h1>My Component</h1>
        </div>
    );
 }


 export default MyComponent;

 

LoadingSpinner.js => App.js에서 MyComponent가 렌더링 되기 전 로딩 중에 보여질 UI를 구성한 파일

 import React from 'react';
 import Spinner from './assets/Spinner.gif';


 function LoadingSpinner() {
    return (
        <div>
            <h1>Loading...</h1>
            <img src={Spinner} alt="Loading..." width="10%" />
        </div>
    );
 }


 export default LoadingSpinner;