[React] Suspense을 사용해 선언적으로 로딩 화면 구현하기

📒 Suspense을 사용해 선언적으로 로딩 화면 구현하기

---

리액트의 Suspense는 React 16 버전에서 처음으로 선보인 후
18 버전으로 오며 추가된 기능을 제공합니다.
 
이 글에서는 React 18에서의 Suspense를 왜, 어떻게 사용하는지 소개합니다.

---

이번에 메이저 버전이 업데이트 된 react-query v5에서 Suspense가 어떻게 달라졌는지 다음 글로 빠르게 살펴보세요!

react-query v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary

---

📌 Suspense를 사용하는 이유

리액트가 함수형 컴포넌트를 도입하며 내세운 가장 강력한 키워드는 선언형 프로그래밍입니다.
 
우선 본격적인 설명에 앞서 대비되는 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명드립니다.
 

🔎 명령형 vs 선언형 프로그래밍

가장 흔하게 표현하기로는 한 작업에 대해
명령형은 어떻게 할 것인지,
선언형은 무엇을 할 것인지 방법의 차이가 있다고 합니다.
 
정말 애매한 표현입니다.
 
우선 코드로 살펴보겠습니다.
 

// ::명령형::
const array = [ 1, 2, 3 ]
let sum = 0;

array.forEach( num => sum += num );

console.log(sum);


// ::선언형::
const array = [ 1, 2, 3 ];
// 어딘가에 선언되어 배열의 합을 구해주는 arraySum 함수
const sum = arraySum(array);
console.log(sum)

명령형은 과정을 늘어놓아 결과를 도출하는 것이고
선언형은 그 결과를 위한 기능을 추상화하여 과정은 숨기고 무엇을 할 것인지에 집중하는 것입니다.
 
즉, 선언형은 어딘가에 명령형으로 추상화된 기능을 이용해 과정은 숨기고,
무엇을 하는지 행위에만 집중하는 것입니다.
 
예를 들어 console.log()나 alert()도 우리가 어떻게 작동하는지는 관심 없이,
"콘솔을 찍기 위해", "얼럿을 띄우기 위해" 사용하는 것과 같습니다.

 

📌 리액트와 선언형

그럼 돌아와서 리액트에서는 추상화된 hook이라는 것을 이용해 선언적인 코드를 작성하고 있습니다.
 
상태를 관리하려 할 때는 useState(),
부수효과(side effect)를 관리 및 사용하려 할 때는 useEffect(),
심지어 간단한 문법만 맞춰주면 알아서 렌더링까지 해주니 여기저기 선언형이 아닐 수 없습니다.
 

export const ConditionalRendering = () => {
  const [state, setState] = useState<{ name: string }>();

  useEffect(() => {
    promiseFun().then(response => setState({ name: response }));
  }, []);
  
  return state ? <Component name={state.name} /> : <Loading />;
};

그런데 지금까지 비동기적으로 데이터를 fetching 해오며 로딩 상태의 화면을 그릴 때는
위와 같이 조건부 렌더링을 이용한 명령형 코드를 작성해 왔습니다.
 
이렇게 각 상황별로 코드를 작성하다 보면 상태가 많아지면 많아질수록
경우의 수도 비례해서 늘어나 코드가 지저분해지고 복잡해질 것이 뻔합니다.
 
그런데 Suspense를 이용하면 다음과 같이 간단하게 처리할 수 있습니다.

const SubComponent = () => {
  const { data } = useQuery(['serverData'], getFetchData, { suspense: true });
  return <div>{data}</div>;
};

const ParantComponent = () => {
  return (
    <Suspense fallback={ <Loading /> }>
      <SubComponent />
    </Suspense>
  );
};

부모 컴포넌트에서 비동기 데이터를 받아오는 자식 컴포넌트를 Suspense로 감싸주기만 하면 끝입니다.
 
로딩화면 처리가 필요한 컴포넌트에 선언적으로 Suspense를 이용함으로써
로딩에 관련된 로직을 위임하게 되고,
자식 컴포넌트에는 비동기 데이터에 대해 신경 쓰지 않고 코드를 작성할 수 있어
관심사 분리에 따른 이득을 취할 수 있습니다.
 
 

📌 Suspense 사용방법

🔎 비동기 데이터 관리 라이브러리

처음엔 대충 확인하고 비동기 데이터를 이용하기만 하면 Suspense를 이용할 수 있을 줄 알았는데
알고 보니 기능을 지원하는 특정 라이브러리가 있었습니다.

• Relay: graphQL을 기반으로 데이터를 다루는 라이브러리
• SWR: 서버 데이터를 다루는 라이브러리
• React-Query: 서버 데이터를 다루는 라이브러리
• Recoil: 전역 상태 관리 라이브러리

Suspense와 비동기 데이터를 이용해 로딩 로직을 짤 수 있는 이유는
Suspense가 Promise를 catch 하는데
위와 같은 라이브러리에서 Promise 상태를 throw 해주는 기능을 제공하기 때문입니다.
 
그렇기 때문에 Promise가 resolve 되기 전까지 Suspense가 fallback UI를 보여줄 수 있게 됩니다.

 

🔎 React-Query + Suspense 사용방법

graphQL은 모르니까 패스하고, Recoil은 클라이언트 전역 데이터 관리만 담당하게 하고,
남은 건 둘 뿐인데 대세는 React-Query기 때문에 이 라이브러리로 예제를 작성해 보겠습니다.
 
react-query에 대한 자세한 설명은 아래 글을 참고해주세요.

[React] react-query, 리액트 쿼리를 사용해야 하는 이유

---

const queryClient = new QueryClient();

root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

앱의 루트 부분에 Provider 설정을 해주어 React-Query 사용 준비를 합니다.
 

const { data } = useQuery(["serverData"], () => getFetchData(2000), {
    suspense: true
});

useQuery 훅에는 ( [key], fetch 콜백 함수, 옵션) 을 인자로 넣을 수 있습니다.
 
키는 배열형태로 넣어줘야 하며 콜백 함수에는 데이터를 fetch 하는 함수가 필요하고
옵션에는 suspense: true 옵션을 줘야 데이터 fetching시 Suspense가 동작합니다.
 

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
    },
  },
})

만약 전역으로 useQuery 훅에 suspense 옵션을 주고 싶다면 클라이언트의 defaultOptions를 이용하면 됩니다.
 
 

import { useQuery } from "@tanstack/react-query";
import { Suspense } from "react";

const getFetchData = async ({ delay }: { delay: number }) => {
  await new Promise((resolve) => setTimeout(resolve, delay));
  const data = await fetch(
    "https://jsonplaceholder.typicode.com/posts/1"
  ).then((response) => response.json());
  return data;
};

type ComponentType = {
  delay: number;
};

const SubComponent = ({ delay }: ComponentType) => {
  const { data } = useQuery(
    ["serverData"],
    () => getFetchData({ delay: delay }),
    { suspense: true }
  );
  return <div>{JSON.stringify(data)}</div>;
};

export const App = () => {
  return (
    <Suspense fallback={<h1>Loading...</h1>}>
      <SubComponent delay={2000} />
    </Suspense>
  );
};

간단하게 작성해 본 예제입니다.
 
jsonplaceholder에서 데이터를 fetch 해오고 의도적으로 딜레이를 줘 원활한 로딩화면 표시를 도왔습니다.
 
확인하면 정상적으로 로딩화면 표시가 되는 것을 확인할 수 있습니다.

---

📌 렌더링 완료 시점이 다른 컴포넌트

렌더링 완료 시점이 서로 다른 컴포넌트들을 Suspense를 이용해
로딩 처리를 하려고 할 때 크게 3가지 방법이 존재합니다.

---

🔎 다른 Suspense에 배치

 

<>
  <h1>Title</h1>
  <Suspense fallback={<h2>Title Loading...</h2>}>
    <Title delay={2000} />
  </Suspense>
  <hr />
  <h1>Body</h1>
  <Suspense fallback={<h2>Body Loading...</h2>}>
    <Body delay={6000} />
  </Suspense>
</>

서로 연관성이 적은 컴포넌트일 경우 다른 Suspense 영역으로 묶어
개별적인 로딩화면을 구성할 수 있습니다.

---

🔎 같은 Suspense 영역에 배치

<>
  <h1>Post</h1>
  <Suspense fallback={<h2>Post Loading...</h2>}>
    <Title delay={2000} />
    <Body delay={6000} />
  </Suspense>
</>

같은 Suspense 안에 컴포넌트를 배치하면
일체감 있게 로딩처리를 할 수 있다는 장점이 있지만 치명적인 단점이 하나 있습니다.
 
바로 앞선 컴포넌트들이 아무리 빨리 데이터를 가져오더라도
가장 시간이 오래 걸리는 컴포넌트가 데이터를 가져오기 전까지 기다려야 한다는 것입니다.
 
위에서도 Title 컴포넌트가 2초 만에 데이터를 가져왔어도
6초의 지연시간을 갖고 있는 Body에 의해 렌더링이 안되는 것을 확인할 수 있습니다.

---

🔎 Suspense In Suspense

여러 컴포넌트들을 개별적인 Suspense를 이용하면 n개의 Loading UI가 표시되는데,
어떤 하나의 데이터를 가져올 때 긴 시간이 걸려도 하나의 로딩으로 구현해야 될 때가 있을 거라 생각합니다.
 
그럴 때 데이터를 가져오는데 긴 시간이 소요되는 컴포넌트를 다음과 같이 처리할 수도 있습니다.
 

<>
  <h1>Post</h1>
  <Suspense fallback={<h2>Post Loading...</h2>}>
    <Suspense fallback={<h2>Profile Image Loading...</h2>}>
      <Image delay={8000} />
    </Suspense>
    
    <Title delay={2000} />
    <Body delay={4000} />
  </Suspense>
</>

Promise 상태를 throw 하면 가장 가까운 Suspense가 catch하기 때문에
내부에 선언된 Suspense가 Promise 상태를 catch 해서 부모 Suspense까지 도달하지 못하게 합니다.
 
그렇기 때문에 하위 Promise가 resolve 되지 않았어도 자식 Suspense에게 로딩 권한을 위임해서
이미 fetching이 끝난 부모 Suspense는 렌더링을 할 수 있게 됩니다.
 
이러한 방식으로 로딩 로직을 짠다면 수많은 fallback UI 대신 연관성 있는 컴포넌트끼리
일관성 있고 순차적인 렌더링을 보여줄 수 있을 겁니다.
 

 

📌 Suspense + ErrorBoundary 프로젝트 도입

Suspense와 ErrorBoundary를 실제 프로젝트에 도입하기 위해서는 더 다양하고 어려운 문제들까지 함께 고려해야 합니다.

더 관심이 있으시다면 다음 글을 참고해주세요.

ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드

[React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드

ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법

[React] ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법