[React] React.Suspense란?

🗣️ React.Suspense에 대해 설명해주세요.

• 의도: 비동기 데이터 로딩 및 렌더링 과정을 이해하고 Suspense를 사용할 수 있는지 확인하는 질문

• 나의 답안

  리액트의 Suspense는 비동기적으로 로드되는 컴포넌트를 '로딩 중' 상태로 처리할 수 있도록 도와주는 기능입니다.
  즉, 특정 컴포넌트가 데이터를 불러오거나 코드 스플리팅으로 인해 아직 준비되지 않았을 때, 그동안 보여줄 fallback UI(대기 화면)를 지정해주는 역할을 합니다.

  예를 들어, Lazy Loading된 컴포넌트를 로드할 때 React는 해당 컴포넌트가 완전히 로드될 때까지 기다리지 않고,
  Suspense가 감싸고 있는 동안 지정된 fallback UI를 먼저 렌더링합니다.
  준비가 완료되면 실제 컴포넌트로 교체됩니다.

• 주어진 답안 (모범 답안)

  네. 리액트의 Suspense는 비동기 데이터를 로딩할 때, 그리고 로딩 상태를 표시할 때 사용하면 좋은 선언형 코드의 일종입니다.
  Suspense에는 fallback 속성을 줄 수 있는데 이 속성이 바로 로딩 상태일 때 화면에 보여줄 요소가 됩니다.

  선언형 코드이니만큼 기존에는 로딩 상태 표시를 위해 isLoading으로 상태를 관리해 로딩 화면을 조건부 렌더링을 해주었다면, 이제는 태그에 속성을 주는 것만으로 간결하게 구현할 수 있다는 장점을 가지고 있습니다.
  다만 주의할 점은 특정 비동기 데이터 호출 라이브러리만 Suspense를 지원하기 때문에 잘 알아보고 적용해야 합니다.

---

📝 개념 정리

🌟 React.Suspense의 개념

• React.Suspense는 React의 내장 컴포넌트로, 비동기 작업(예: 데이터 로드나 코드 스플리팅)을 처리하는 동안 컴포넌트의 렌더링을 지연시킬 수 있다.
• 사용자가 기다림을 경험하는 동안 대체 UI(예: 로딩 스피너)를 제공할 수 있도록 도와준다.
• 주로 React.lazy와 Concurrent Mode(React 18 이상)에서 데이터 페칭과 함께 사용된다.

---

🌟 React.Suspense의 주요 특징

1. 비동기 작업을 처리하는 동안 대체 UI 표시
   Suspense는 비동기 데이터가 준비되지 않은 상태에서 fallback UI를 렌더링한다.
   데이터가 준비되면 대체 UI를 실제 콘텐츠로 대체한다.

2. 코드 스플리팅
   React.lazy와 함께 사용하면 필요한 시점에 컴포넌트를 동적으로 로드할 수 있다.
   이는 초기 번들 크기를 줄이고 앱의 성능을 향상시키는 데 유용하다.

3. 동기적인 사용자 경험 제공
   데이터를 비동기로 가져올 때, 깜빡이는 화면 대신 스무스한 로딩 경험을 제공한다.

---

🌟 React.Suspense의 구조

<Suspense fallback={<Loading />}>
  <MyComponent />
<Suspense/>

• fallback: 비동기 작업이 완료되기 전에 표시할 대체 UI이다. 주로 로딩 인디케이터(스피너, 로딩 텍스트 등)를 사용한다.
• 자식 컴포넌트: 비동기 데이터나 동적으로 로드되는 컴포넌트를 포함할 수 있다.

---

🌟 React.Suspense의 주요 사용 사례

1. React.lazy를 이용한 코드 스플리팅
   React.lazy와 Suspense를 조합하면 컴포넌트를 동적으로 로드할 수 있다.

   import React, { Suspense } from "react";
   
   const LazyComponent = React.lazy(() => import("./MyComponent"));
   
   function App() {
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <LazyComponent />
       </Suspense>
     );
   }

   • LazyComponent는 MyComponent를 동적으로 로드하며, 로드되는 동안 "Loading..."을 표시한다.

2. 데이터 페칭 (React 18 이상)
   React 18부터 Suspense는 서버와 클라이언트에서 데이터를 페칭할 때 사용할 수 있다.
   서버 컴포넌트와 use() 함수로 데이터를 기다리는 작업이 가능하다.

   import React, { Suspense } from "react";
   
   async function fetchData() {
     return new Promise((resolve) => setTimeout(() => resolve("Hello, Server Component!"), 2000));
   }
   
   function MyComponent() {
     const data = use(fetchData()); // 서버 컴포넌트에서만 사용 가능 
     return <div>{data}</div>;
   }
   
   export default function App() {
     return (
       <Suspense fallback={<div>Loading data...</div>}>
         <MyComponent />
       </Suspense>
     );
   }

   • 이 코드는 React 서버 컴포넌트에서만 동작하며, 클라이언트 컴포넌트에서는 사용할 수 없다.

     ⭐ use() 함수란?

     • use()는 React 18부터 지원되는 함수로, React 서버 컴포넌트(Server Component) 환경에서 비동기 데이터를 쉽게 가져오는 데 사용된다.
     • use()는 Promise를 받아서 그 결과를 반환하며, React의 Suspense와 결합하여 비동기 작업을 처리한다.
     • 이 함수는 클라이언트 컴포넌트에서는 사용할 수 없고, 서버 컴포넌트 전용이다.

     ⭐ use() 함수의 주요 특징

     1. Promise를 기다린다.
        • use() 함수는 전달받은 Promise가 해결될 때까지 기다리고, 그 결과를 반환한다.
        • Promise가 해결되지 않았을 경우, React는 해당 컴포넌트를 중단(suspend)하고 Suspense의 fallback UI를 렌더링한다.
     2. Suspense와의 통합
        • use()는 React 서버 컴포넌트에서 Suspense를 사용해 비동기 데이터를 로딩하는 동안 대체 UI를 보여줄 수 있도록 설계되었다.
     3. 서버 컴포넌트 전용
        • use()는 클라이언트 컴포넌트에서는 사용할 수 없다.
        • React의 서버 렌더링 환경(예: Next.js App Router)에서만 동작한다.

     ⭐ use() 함수의 주요 이점

     1. 코드 간결화
        비동기 데이터 처리 코드를 단순화한다.
        기존에 useEffect와 useState를 조합하여 작성해야 했던 로직을 줄일 수 있다.
     2. React의 비동기 처리와 통합
        React의 Suspense와 결합하여 비동기 데이터 로딩 중 적절한 대체 UI를 제공할 수 있다.
     3. 서버 렌더링 최적화
        서버 컴포넌트에서 데이터를 로드하므로 클라이언트로 보내는 HTML이 이미 준비된 데이터를 포함하게 된다. 이로 인해 초기 로딩 시간이 단축된다.

---

🌟 Suspense의 동작 원리

1. 비동기 처리 상태 감지
   Suspense는 자식 컴포넌트에서 비동기 작업이 발생했음을 감지하고, 해당 작업이 완료될 때까지 렌더링을 중단한다.

2. 대체 UI 렌더링
   작업이 완료될 때까지 fallback으로 지정된 컴포넌트를 렌더링한다.

3. 작업 완료 후 렌더링 재개
   비동기 작업이 완료되면, Suspense는 자식 컴포넌트를 다시 렌더링하여 최종 데이터를 화면에 표시한다.

---

🌟 Suspense의 제한사항

1. 동기적 데이터 페칭에서 동작하지 않음
   Suspense는 비동기 작업과 함께 사용하도록 설계되었다.
   따라서 동기적으로 데이터를 페칭하면 제대로 동작하지 않는다.

2. 서드파티 라이브러리 필요
   Suspense 자체는 데이터 페칭 로직을 제공하지 않는다.
   react-query, Relay, SWR 같은 서드파티 라이브러리를 사용하여 데이터를 가져와야 한다.

3. SSR(서버 사이드 렌더링) 제한
   React 18 이전까지 Suspense는 SSR에서 완전히 지원되지 않았다.
   React 18에서는 서버 컴포넌트와 함께 이 제한이 해결되었다.

---

🌟 React 18 이상에서의 Suspense 데이터 페칭과 사용

React 18에서 Suspense는 더 강력한 기능을 제공하며, 데이터 페칭과 SSR에서 사용할 수 있다.

예시: React Query와 함께 사용

import { Suspense } from "react";
import { useQuery } from "react-query";

function fetchData() {
  return fetch("https://api.example.com/data").then(res => res.json());
}

function MyComponent() {
  const { data } = useQuery("myData", fetchData);
  
  return <div>{data.message}</div>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

---

🌟 Suspense로 얻을 수 있는 이점

1. 더 나은 사용자 경험: 비동기 작업 동안 매끄러운 대체 UI 제공
2. 코드 스플리팅: 초기 번들 크기를 줄여 애플리케이션 로드 속도를 개선
3. 단순화된 비동기 로직: 비동기 처리 로직을 UI에서 직접 관리