React에서는 Suspense 컴포넌트를 사용하여 비동기적으로 데이터를 로딩하고 표시할 때 사용됩니다. Suspense는 fallback prop을 통해 로딩 중에 보여줄 대체 콘텐츠를 제공하고, Suspense 컴포넌트 내부에서 React.lazy와 함께 사용하여 컴포넌트를 비동기적으로 로딩할 수 있습니다.

import React, { Suspense } from 'react';

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

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

위의 예시에서는 Suspense 컴포넌트를 사용하여 fallback prop으로 “Loading…“이라는 대체 콘텐츠를 제공하고, LazyComponent를 비동기적으로 로딩합니다. LazyComponent가 로딩되기 전에는 대체 콘텐츠가 보여지고, 로딩이 완료되면 실제 컴포넌트가 표시됩니다.

자바스크립트에서 직접적으로 코드 실행을 지연시키기 위해서는 setTimeout 함수를 사용할 수 있습니다. 코드 실행을 지연시키기 위해 setTimeout 함수는 일정 시간을 기다렸다가 해당 코드를 실행합니다.

console.log('Before');
setTimeout(() => {
  console.log('Delayed');
}, 1000);
console.log('After');

위의 예시에서는 setTimeout 함수를 사용하여 1초(1000ms) 후에 “Delayed”를 출력합니다. “Before”와 “After”는 지연 없이 즉시 출력됩니다.

하지만 이는 코드 실행을 지연시키는 방법이지 Suspense와는 관련이 없습니다. Suspense는 React에서 사용되는 기능이고, 자바스크립트에서는 setTimeout 함수를 이용하여 코드 실행을 지연시킬 수 있습니다.