React에서 Suspense 사용법

 

React는 UI를 구축하기 위한 강력한 라이브러리이며, 사용자 경험(UX)을 최적화하는 다양한 기능을 제공합니다. 그중 Suspense는 데이터 로딩과 같은 비동기 작업 중에도 UI가 부드럽게 동작하도록 돕는 핵심 도구 중 하나입니다. 이번 블로그에서는 React의 Suspense 개념부터 사용법, 그리고 실제 적용 사례를 다루어 보겠습니다.

---

1. Suspense란 무엇인가?

Suspense는 React의 내장 컴포넌트로, 비동기적으로 데이터를 로드하거나 외부 리소스를 가져오는 동안 사용자에게 대기 화면(Loading UI)을 표시할 수 있도록 설계되었습니다. Suspense는 주로 다음 두 가지 상황에서 사용됩니다:

1. 코드 스플리팅(Code-Splitting): 큰 애플리케이션을 작은 청크(chunk)로 나누어 필요한 부분만 로드할 때 사용됩니다. React의 React.lazy와 함께 사용됩니다.
2. 데이터 페칭(Data Fetching): 비동기 데이터 로딩 중에 적절한 대기 UI를 제공하여 사용자 경험을 개선합니다.

React 18부터는 Suspense가 서버 사이드 렌더링(SSR)에서도 완전히 지원되며, 데이터 페칭 작업에서 더 유용해졌습니다.

---

2. 기본 사용법: 코드 스플리팅

Suspense의 대표적인 사용 사례는 코드 스플리팅입니다. 큰 애플리케이션의 초기 로딩 시간을 줄이기 위해 React.lazy와 함께 사용하여 동적으로 컴포넌트를 로드할 수 있습니다.

import React, { Suspense } from 'react';

// Lazy-loaded Component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>React Suspense Example</h1>
      {/* Suspense로 로딩 UI 지정 */}
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

위 코드에서 React.lazy는 컴포넌트를 동적으로 가져오며, 로드가 완료될 때까지 Suspense에서 지정한 fallback UI를 표시합니다. 이 방법은 번들 크기를 줄이고 초기 로딩 성능을 개선하는 데 유용합니다.

---

3. Suspense와 데이터 페칭

React 18 이후, Suspense는 데이터 페칭 작업에도 적용할 수 있습니다. 비동기 작업 중 로딩 상태를 관리하면서도 간단하게 사용할 수 있습니다. 이를 위해 React의 useTransition, useDeferredValue, 또는 외부 라이브러리인 React Query, Relay와 함께 사용하는 것이 일반적입니다.

예제: Suspense를 사용한 데이터 로딩

import React, { Suspense } from 'react';

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Hello, Suspense!'), 2000);
  });
};

const Resource = () => {
  const data = fetchData();
  if (!data) {
    throw data; // Suspense에서 처리
  }
  return <div>{data}</div>;
};

function App() {
  return (
    <div>
      <h1>Suspense와 데이터 로딩</h1>
      <Suspense fallback={<div>Loading data...</div>}>
        <Resource />
      </Suspense>
    </div>
  );
}

export default App;

위 코드는 Suspense를 활용하여 데이터 로딩 중 로딩 UI를 표시하는 방법을 보여줍니다. 비동기 작업의 결과가 준비될 때까지 Suspense가 로딩 상태를 관리합니다.

주의: React의 기본 상태 관리만으로는 복잡한 데이터 페칭이 어려울 수 있으므로 React Query 또는 Relay와 함께 사용하는 것이 권장됩니다.

---

4. useEffect로 데이터 로딩하기

useEffect는 React에서 데이터 로딩을 관리할 때 자주 사용되는 훅(Hook)입니다. 비동기 작업을 처리하고 컴포넌트의 라이프사이클에 따라 적절히 업데이트할 수 있습니다.

예제: useEffect로 데이터 로딩하기

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 데이터 로드 함수
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // 빈 배열로 의존성 설정

  if (loading) {
    return

Loading...

;
  }

  return (

{data.title}

{data.body}

  );
}

export default App;

이 코드에서는 useEffect를 사용하여 컴포넌트가 마운트될 때 데이터를 로드합니다. 로딩 상태를 관리하기 위해 loading 상태 변수를 사용하며, 데이터가 로드된 후 UI를 업데이트합니다.

주의: useEffect 내에서 비동기 함수를 직접 사용할 수 없으므로, 비동기 작업은 함수 내부에서 호출해야 합니다.

---

5. 실전 적용 사례

(1) React Query와의 통합

React Query는 데이터 페칭과 캐싱을 쉽게 관리할 수 있는 라이브러리로, Suspense와 함께 사용하면 더욱 강력합니다.

import React, { Suspense } from 'react';
import { useQuery } from 'react-query';

const fetchUser = async () => {
  const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
  return res.json();
};

const User = () => {
  const { data } = useQuery('user', fetchUser, { suspense: true });
  return

User Name: {data.name}

;
};

function App() {
  return (
    Loading user data...}>
      
    
  );
}

export default App;

이 코드에서 useQuery는 suspense: true 옵션을 활성화하여 비동기 데이터를 관리합니다. 이를 통해 데이터를 가져오는 동안 Suspense가 로딩 UI를 자동으로 표시합니다.

(2) 서버 컴포넌트와 Suspense

React 18에서는 서버 컴포넌트와 함께 Suspense를 활용해 클라이언트와 서버 간의 데이터를 효율적으로 로드할 수 있습니다. 이로 인해 초기 렌더링 속도가 대폭 개선될 수 있습니다.

---

6. Suspense 사용 시 주의사항

1. Fallback UI 설계: 로딩 상태를 나타내는 fallback UI는 사용자 경험에 중요한 영향을 미칩니다. 단순한 스피너 대신, 예상 대기 시간을 나타내는 메시지나 애니메이션을 활용하는 것이 좋습니다.
2. Error Boundary와 결합: Suspense는 에러 처리를 포함하지 않으므로, 비동기 작업 중 오류를 관리하려면 Error Boundary를 함께 사용하는 것이 필수적입니다.
3. SSR과 호환성: 서버 렌더링 환경에서 Suspense를 사용할 경우, 적절한 데이터 페칭 라이브러리를 선택해야 합니다.

---

7. 결론

Suspense는 React 애플리케이션에서 코드 스플리팅과 데이터 페칭을 간소화하고, 사용자 경험을 크게 개선할 수 있는 강력한 도구입니다. React 18 이후로는 서버 렌더링까지 지원 범위가 확대되면서 더 많은 활용 가능성을 제공합니다.

한편, 간단한 데이터 로딩 작업에서는 useEffect와 같은 기존의 방법을 활용하는 것도 여전히 유효합니다. 적절한 라이브러리와 함께 Suspense와 useEffect를 혼합하여 복잡한 UI를 효율적으로 관리해 보세요. 여러분의 프로젝트에서 이를 적용해 보세요!