230829 React: Suspense

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

---

리액트 서스펜스(React Suspense)는 리액트 애플리케이션의 비동기 데이터 처리를 간편하게 만들어주는 핵심 기능이다. 이를 사용하여 비동기 작업이나 코드 스플리팅을 할 수 있다. 또한  컴포넌트는 자식 컴포넌트가 준비될 때까지 로딩 중인 UI를 렌더링하도록 처리하고 데이터 fetching 등을 처리할 수 있다.

---

1. lazy

lazy 함수를 사용하여 동적으로 코드를 분할하고, 필요한 컴포넌트를 비동기적으로 로딩할 수 있다. 이를 통해 초기 번들 크기를 줄이고, 애플리케이션의 로딩 속도를 향상시킬 수 있다.

import React, { Suspense } from 'react';

// 비동기적으로 로딩할 컴포넌트를 import
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <Suspense fallback={<div>로딩...</div>}>
        {/* <Suspense> 컴포넌트는 비동기 컴포넌트 로딩 중
        fallback prop으로 제공한 로딩 메시지나 컴포넌트를 렌더링 */}
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

---

2. Error Boundary

비동기 작업 중 발생하는 에러를 처리하기 위해 에러 바운더리(Error Boundary) 컴포넌트와 함께 사용할 수 있다. 이를 통해 애플리케이션 전체가 크래시되는 것을 방지하고 사용자 경험을 향상시킬 수 있다.

import React, { Suspense } from 'react';

// 비동기 작업에서 발생할 수 있는 에러를 2초 후에 던지는 함수
const fetchDataWithError = () => {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('데이터 로딩 실패!'));
    }, 2000); //2초 후에 던짐
  });
};

function DataFetchingWithError() {
  const data = fetchDataWithError();

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

// ErrorBoundary 컴포넌트 정의
// 컴포넌트에서 발생하는 에러를 잡아 hasError 상태를 설정하고, 에러가 발생시 에러 메시지를 보여줌
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) { // 에러 메시지
      return <div>에러가 발생했습니다</div>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <div>
      <h1>Error Handling Example</h1>
      <ErrorBoundary>
        <Suspense fallback={<div>로딩...</div>}>
          <DataFetchingWithError />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;

---

3. 데이터 fetching

import React, { Suspense } from 'react';

// 비동기 데이터 fetching 함수
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('데이터가 성공적으로 로딩되었습니다');
    }, 2000); // 2초 후에 데이터를 반환
  });
};

function DataFetchingComponent() {
  // 데이터 fetching 중에는 Suspense가 fallback을 렌더링
  const data = fetchData();

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

function App() {
  return (
    <div>
      <h1>Data Fetching Example</h1>
      {/* <Suspense> 컴포넌트는 DataFetchingComponent 컴포넌트에서 데이터 
      fetching 중에 fallback으로 제공한 로딩 메시지를 렌더링*/}
      <Suspense fallback={<div>로딩...</div>}>
        <DataFetchingComponent />
      </Suspense>
    </div>
  );
}

export default App;