향상된 비동기 렌더링을 위해 React에서 Suspense를 사용하는 방법

반응의 서스펜스

React Suspense는 구성 요소나 데이터가 로드되는 동안 대체 UI를 표시하여 개발자가 비동기 렌더링을 우아하게 처리할 수 있게 해주는 강력한 기능입니다. 이는 React.lazy, 동시 렌더링 및 React Query, Relay 또는 사용자 정의 구현과 같은 데이터 가져오기 솔루션과 함께 작동합니다.

---

서스펜스 작동 방식

1. 자리 표시자 대체: Suspense는 비동기 작업을 기다려야 하는 구성 요소를 래핑합니다. 기다리는 동안 대체 UI(예: 로딩 스피너)가 표시됩니다.
2. 자동 렌더링: 비동기 작업이 완료되면 실제 구성 요소 또는 데이터가 렌더링됩니다.

---

기본 구문

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

• React.Suspense: 지연 로드된 구성 요소를 래핑합니다.
• fallback: 구성 요소가 로드되기를 기다리는 동안 표시할 UI를 지정합니다.

---

서스펜스의 사용 사례

1. 지연 로딩 구성 요소: React.lazy를 사용하여 동적으로 구성 요소를 로드합니다.
2. 데이터 가져오기: Relay 또는 React Query와 같은 라이브러리와 결합하여 비동기 데이터 로드를 관리합니다.
3. 동시 렌더링: 동시 React 모드에서 렌더링을 최적화합니다.

---

예제 1: Suspense를 사용한 지연 로딩

서스펜스 없이

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

HeavyComponent가 동기식으로 로드되어 초기 로드 시간이 늘어납니다.

서스펜스와 함께

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

이제 HeavyComponent는 필요할 때만 로드되어 로드 프로세스 중에 폴백을 표시합니다.

---

예제 2: 지연 구성 요소가 여러 개 있는 Suspense

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Suspense fallback={<div>Loading Components...</div>}>
        <ComponentA />
        <ComponentB />
      </Suspense>
    </div>
  );
}

export default App;

대체 UI는 두 구성 요소 로드가 완료될 때까지

표시됩니다.

---

예 3: 데이터 가져오기에 대한 일시 중단(실험적)

React Suspense는 Relay 또는 React Query와 같은 라이브러리와 통합될 때 비동기 데이터 가져오기에도 유용합니다.

React 쿼리의 예

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

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

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

export default App;

---

Suspense를 사용한 오류 처리

컴포넌트나 데이터를 로드하는 중에 오류가 발생하면 React Suspense는 내장된 오류 처리 기능을 제공하지 않습니다. 이러한 목적으로 오류 경계를 사용하세요.

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

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

export default App;

---

Suspense 사용 모범 사례

1. 간단한 대체: 성능 오버헤드를 방지하려면 가벼운 자리 표시자를 사용하세요.
2. 오류 경계와 결합: 구성 요소 또는 데이터 로드 오류를 적절하게 처리하도록 보장합니다.
3. 지능적인 청크: 더 나은 성능을 위해 애플리케이션을 논리적 청크로 나눕니다.

---

서스펜스의 이점

1. 향상된 사용자 환경: 대체 UI를 표시하여 앱의 응답성을 유지합니다.
2. 축소된 번들 크기: 최적화된 번들 크기를 위해 코드 분할과 잘 작동합니다.
3. 간소화된 비동기 처리: 보다 선언적인 방식으로 로드 상태를 관리합니다.

---

고급 사용: 중첩된 서스펜스

대체 상태를 세부적으로 제어하기 위해 여러 Suspense 구성요소를 중첩할 수 있습니다.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

서스펜스의 한계

1. 데이터 가져오기 지원: 데이터를 직접 가져오는 실험적인 기능입니다.
2. 오류 처리 없음: 오류 경계와 같은 추가 오류 처리 메커니즘이 필요합니다.
3. 브라우저 호환성: ES6 모듈 및 Promise를 지원하는 최신 브라우저가 필요합니다.

---

결론

React Suspense는 React 애플리케이션에서 비동기 렌더링을 관리하기 위한 다목적 도구입니다. 로딩 상태 처리를 단순화하고, 지연 로딩으로 성능을 향상시키며, 코드 분할 및 오류 처리 기술과 결합하면 더욱 원활한 사용자 경험을 제공합니다.

---

위 내용은 향상된 비동기 렌더링을 위해 React에서 Suspense를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!