Suspense를 사용하여 자바스크립트 원격 API 요청을 지연시키는 방법은?

07 Nov 2023

reactjs

첫 번째로, React.lazy 함수를 사용하여 컴포넌트를 동적으로 로드합니다. 이러한 컴포넌트는 원격 API 요청을 수행할 것입니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

import React, { Suspense } from 'react';

const RemoteComponent = React.lazy(() => import('./RemoteComponent'));

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

export default App;

Suspense 컴포넌트를 사용하여 로딩 중인 동안 표시할 로딩 메시지나 로딩 스피너를 지정합니다. 위 예제에서는 <div>Loading...</div>를 사용하여 로딩 중임을 표시하고 있습니다. 이는 비동기 컴포넌트가 로딩되는 동안 보여지게 됩니다.
RemoteComponent 컴포넌트에서 원격 API 요청을 처리합니다. 이 컴포넌트는 useEffect 훅을 사용하여 컴포넌트가 마운트 될 때 원격 API를 요청합니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function RemoteComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('https://example.com/api/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      {data && <div>{data}</div>}
    </div>
  );
}

export default RemoteComponent;

위의 예제에서는 axios를 사용하여 원격 API 요청을 보내고, 응답이 도착하면 데이터를 상태로 설정하여 화면에 표시합니다.

이제 원격 API 요청을 손쉽게 지연시키는 방법을 알게 되었습니다. Suspense를 사용하면 사용자에게 로딩 상태를 표시하면서 API 요청을 보낼 수 있습니다. 다양한 로딩 메시지를 사용하거나 스피너를 추가하여 사용자 경험을 향상시킬 수 있습니다.

자세한 내용은 React 공식 문서를 참조하시기 바랍니다.

#React #자바스크립트