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

안녕하세요 👋,

첫 번째 부분에서는 React Suspense API가 무엇을 하고 지연 구성 요소와 함께 어떻게 작동하는지 설명했습니다.

이 마지막 부분에서는 데이터를 가져올 때 React Suspense를 사용하는 방법을 볼 것입니다. 응답을 기다리는 동안 사용자는 자신의 화면에서 무언가를 볼 필요가 있으며 React Suspense는 화면에 무언가를 표시하는 폴백을 제공하여 사용자에게 로드 중인 프로세스가 있음을 알립니다. 배경.

전제 조건

이 시리즈의 첫 번째 부분을 읽지 않았다면 읽어보십시오.

JSON 서버에 대한 기본 이해, 몇 가지 예를 통해 개념을 더 잘 이해할 수 있는 기사가 있습니다.
여기에서 읽을 수 있습니다

.

이 문서의 코드는 here에서 찾을 수 있습니다.

먼저 로컬 머신에서 리포지토리를 복제해야 합니다.
다음으로 텍스트 편집기에서 저장소를 엽니다. 제 경우에는 VScode를 사용하고 있습니다.web-client 및 server 두 개의 폴더가 있습니다.
vscode 내에서 터미널을 엽니다: Windows 사용자의 경우 Control + J, Mac 사용자의 경우 Command + J.
다음 디렉토리에 있어야 합니다.


두 번째 터미널 추가

모든 종속 항목을 설치하려면 첫 번째 터미널에서 web-client directory로 이동한 다음 npm install를 실행하고 server directory에서 동일한 작업을 수행하되 두 번째 터미널에서 수행합니다.

모든 종속성이 설치되면 server directory에서 npm run serve-json 명령을 실행하면 port 7000가 컴퓨터에서 실행되고 npm run dev가 웹 클라이언트에서 실행됩니다. 그런 다음 브라우저에서 localhost:3000로 이동하여 웹 사이트에 액세스하십시오.


이제 우리localhost:7000/data.에서 실행 중인 가짜 REST API에서 데이터를 가져오겠습니다.

이를 위해 웹 내부에 새 파일을 생성해 보겠습니다. client/src/page/FiciGame/이름을 지정하십시오fetchFici.js
내부에 아래 코드를 입력하십시오.

const fetchFici = (search) => {
    return fetch(`http://localhost:7000/data?q=${search}`)
        .then(res => res.json())
        .catch(err => console.log(err))
}

const wrapPromise = (promise) => {
    let status = 'pending';
    let result = '';
    let suspender = promise.then(
        r => {
            status = 'success';
            result = r;
        },
        e => {
            status = 'error';
            result = e;
        }
    );
    return {
        read() {
            if (status === 'pending') {
                throw suspender;
            } else if (status === 'error') {
                throw result;
            }
            return result;
        }
    }
}

export const createResource = (search) => {
    return {
        data: wrapPromise(fetchFici(search))
    }
}

조명:

첫 번째 함수인 fetchFici는 전달된 매개변수에 따라 데이터를 가져옵니다.http://localhost:7000/data?q={<params>}.
이 작업을 수행하기 위해 약속을 매개변수로 사용하는 함수를 생성할 것입니다. 내부에는 기본값으로 'pending'가 있는 status라는 문자열 변수를 생성합니다. 이는 약속이 완료되었는지 또는 로드 중인지 또는 오류인지 추적합니다.
다음 줄은 약속을 기다리는 변수입니다.

하단에는 상태를 읽고 확인하는 함수를 반환합니다.
React Suspense는 약속을 잡을 수 있도록 우리가 약속을 던질 것을 기대합니다.

마지막으로 개체를 반환하는 함수를 내보냅니다. 해당 개체 내에서 우리가 전달하는 개체fetchFici()는 서스펜스 API에 맞는지 확인하기 위해 wrapPromise 내에서 래핑하는 약속을 반환할 것입니다.

이 설정이 있으면 재사용할 수 있습니다.

import React, { Suspense, useState } from 'react'
import Spinner from '../../layout/spinner';
import { createResource } from './fetchFici';
const FiciGame = () => {
    const [fici, setFici] = useState('Fire')
    const resource = createResource(fici);

    return (
        <div className='border rounded-md bg-zinc-800 border-white p-4'>
            <p className='text-center text-3xl font-mono'>Fici Game</p>
            <Suspense fallback={<Spinner />}>
             //Component to be add
            </Suspense>
            <ul className='flex justify-center gap-2 items-center'>
                <li onClick={() => setFici('Fire')} className='p-4 border hover:cursor-pointer text-2xl shadow-lg  bg-gray-900 border-white'>Fire</li>
                <li onClick={() => setFici('Rock')} className='p-4 border hover:cursor-pointer text-2xl shadow-lg  bg-gray-900 border-white'>Rock</li>
                <li onClick={() => setFici('Water')} className='p-4 border hover:cursor-pointer text-2xl shadow-lg  bg-gray-900 border-white'>Water</li>
                <li onClick={() => setFici('Air')} className='p-4 border hover:cursor-pointer text-2xl shadow-lg  bg-gray-900 border-white'>Air</li>
            </ul>
        </div>
    )
}

export default FiciGame

조명:

내부index.jsx에서 문자열 값을 사용하는 useState를 만듭니다.
그런 다음 누를 <li> 태그에 따라 값을 설정합니다.

그런 다음 리소스에 저장하는 우리import creacteRessource() 내부에 fici에서 가져온 문자열을 전달합니다.

다음으로 React에서 서스펜스 구성 요소를 가져오고 백그라운드에서 데이터를 가져오는 동안 표시될 폴백 함수를 전달합니다.
Suspense API 내에서 프로세스가 완료된 후 렌더링할 구성 요소(저는 Screen이라고 함)를 만들 것입니다.

이제 해당 구성 요소를 만들어 보겠습니다.web-client/src/page/FiciGame/ 내부에 screen.jsx라는 파일을 만들고 해당 파일 내부에 다음 코드를 입력합니다.

import React from 'react'

const Screen = (props) => {
    const { resource } = props;
    const ficiData = resource.data.read()
    const ficiName = ficiData[0].name
    const ficiSymbol = ficiData[0].symbol

    return (
        <div className='border bg-gray-900 flex flex-col space-y-4 justify-center items-center border-white h-80 m-4'>
            <p className="p-4 font-mono text-lg">{ficiName}</p>
            <span className='text-9xl shadow-2xl rounded-full'>{ficiSymbol}</span>
        </div>
    )
}

export default Screen

ressource.data.read() ; 여전히 로드 중이면 서스펜스 구성 요소에 의해 포착될 약속을 던지고 로딩 표시기를 표시할 것입니다. 그렇지 않으면 데이터를 가져와 표시합니다.
index.jsx로 돌아가서 Screen.jsx를 가져와 Suspense 구성 요소 안에 넣은 다음 모든 파일을 저장합니다.

import Screen from './screen';

const FiciGame = () => {
    return (
[...]
            <Suspense fallback={<Spinner />}>
                <Screen resource={resource} />
            </Suspense>
[...]
    )
}

export default FiciGame

테스트

To test this, go to your browser open up your devtool in the network tab, look on the top No throttling choose fast 3G then refresh the page.

축하합니다. 이제 Suspense API 및 지연 로딩 구성요소 사용의 마스터가 되셨습니다. 주저하지 말고 사용해 보세요. 조금 더 복잡해 보이지만 더 많이 연습하면 요령을 터득할 것입니다.

댓글을 남기거나 에서 저와 채팅하는 것을 잊지 마세요.

만나요👋