React:데이터 가져오기에 대한 서스펜스(1부)

소개

사용자가 웹 사이트를 열면 페이지에 있는 모든 구성 요소를 렌더링하지만 여전히 괜찮지만 렌더링할 구성 요소가 더 많아지고 웹 사이트가 점점 더 커지고 많은 구성 요소가 동일한 페이지에 있다고 가정해 보겠습니다. 이로 인해 웹 사이트에서 사용자 브라우저에 구성 요소를 다운로드하는 데 시간이 오래 걸립니다.

React는 이 시나리오를 처리하기 위해 'lazy'라는 메서드를 제공합니다.
lazy method를 사용하는 구성 요소는 필요할 때만 다운로드되고 이전에는 다운로드되지 않습니다. 그러나 사용자의 연결 상태가 좋지 않으면 구성 요소가 표시되는 데 시간이 오래 걸리고 빈 화면만 표시되어 좋지 않은 사용자 경험을 제공합니다.

To prevent this, we have to display something that let the user knows what is happening in the background.

여기서 Suspence API가 유용합니다. 바로 다이빙하자,

서스펜스가 무엇입니까?

Suspense API는 lazy components와 함께 작동하여 일부 로드가 백그라운드에서 발생하고 있음을 사용자에게 알립니다.

"로드 중 상태..."를 표시하는 방법이 있다고 생각할 수도 있습니다.
실제 구성 요소가 처리되고 다운로드되는 동안 메시지, 스켈레톤 또는 스피너 휠.

예시

이제 애플리케이션에서 Suspense API를 사용해 보겠습니다.

기본 예
Suspense API를 사용하려면 React에서 내보낼 lazy component 안에 <Suspense>를 랩해야 합니다.

import React, { lazy, Suspense } from 'react'
import Spinner from './layout/spinner';
const FiciGame = lazy(() => import('./page/FiciGame'));

const App = () => {
    return (
        // Show a spinner while the profile is loading
        <div className='mx-auto w-4/12 p-8 flex justify-center self-center shadow-xl rounded-md bg-gray-900'>
            <Suspense fallback={<Spinner />}>
                <FiciGame />
            </Suspense>
        </div>
    )
}

export default App

📌github source code

결과
이것은 응용 프로그램에서 <Suspense> 및 lazy loading method를 추가한 후의 결과입니다.

결론

이 기사에서는 사용자에게 백그라운드에서 어떤 일이 일어나고 있음을 알리기 위해 빈 화면을 표시하는 대신 로딩 메시지를 표시하는 방법을 살펴보았습니다.

첫 번째 부분에서는 지연 로딩 방법으로 Suspense를 사용하는 방법을 살펴보았습니다. 다음 부분에서는 좀 더 발전된 예를 볼 것입니다. Suspense가 구성 요소가 렌더링되기 전에 요청이 완료될 때까지 "대기"하는 방법을 볼 것입니다.

참조

Suspense for data fetching

Understanding the Suspense API in React 18

나와 연결하고 싶다면 에서 나를 찾을 수 있습니다.

👋 곧 만나요.