[React] Suspense

React 18 버전이 정식 릴리스가 되면서 추가된 Suspense에 대해서 알아보자 

 

Suspense? 

Suspense는 React에서 컴포넌트의 렌더링을 특정 작업이 끝날 때까지 중단시키고 

다른 컴포넌트를 먼저 렌더링 하는 기능이다. 

 

일반적으로 REST API나 GraphQL을 호출하여 네트워크를 통해 비동기로 데이터를 가져오는 경우에 

사용하면 유용할 것 같다. 

 

<UserList />

유저의 리스트를 출력하는 UserList 컴포넌트가 있다고 생각해보자.

당연히 컴포넌트를 호출하면 화면에 UserList 컴포넌트가 나타날 것이다.

하지만 아직 비동기 데이터인 유저 정보를 가지고 오지 않았다면 로딩 화면이 출력돼야 할 것이다. 

import { useState, useEffect } from "react";

function User({ userId }) {
  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState([]);

  // ...

  if (loading) return <p>사용자 정보 로딩중...</p>;
  return (
    <div>
      <p>{user.name} 님</p>
    </div>
  );
}

export default User;

일반적으로는 loading과 같은 State를 통해서 Loading 화면을 출력했을 겁니다. 

 

Suspense는 어떤 방식으로 사용하는가? 

function fetchUser(userId) {
  let user = null;
  const suspender = fetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  )
    .then((response) => response.json())
    .then((data) => {
      setTimeout(() => {
        user = data;
      }, 3000);
    });
  return {
    read() {
      if (user === null) {
        throw suspender;
      } else {
        return user;
      }
    },
  };
}

export default fetchUser;

먼저 UserList 컴포넌트에서 데이터를 불러오는 로직을 분리합니다. 

read 함수는 데이터를 수신 중에는 API를 호출하는 Promise를 반환하고 수신이 완료되면 데이터를 반환합니다. 

 

import { Suspense } from "react";
import User from "./pages/user";
import fetchUser from "./pages/user/fetchUser";

function App() {
  return (
    <Suspense fallback={<p>사용자 정보 로딩중...</p>}>
      <User data={fetchUser("1")} />
    </Suspense>
  );
}

export default App;

Suspense를 사용해서 fallback에 Loading 화면을 넣어주고 data에서 API를 호출해서 넘겨준다. 

 

import { useState } from "react";

function User({ data }) {
  const [user, setUser] = useState(data.read());
  
  return (
    <div>
      <p>{user.name} 님</p>
    </div>
  );
}

export default User;

UserList 컴포넌트에서는 불러온 데이터를 state에 넣어서 사용하는 방식이다. 

Suspense를 사용하면 데이터를 불러오는 부분과 UI 렌더링 부분을 분리할 수 있어서 코드 가독성이 향상된다. 

가독성이 향상되므로 유지 보수성도 향상된다.