다음은 리액트에서 “suspense”를 사용하여 애니메이션을 지연시키는 간단한 예제입니다.

import React, { Suspense } from 'react';

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

const App = () => {
  return (
    <div>
      <h1>리액트 애니메이션 지연 예제</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyAnimatedComponent />
      </Suspense>
    </div>
  );
};

export default App;

위의 예제에서는 React.lazy()를 사용하여 AnimatedComponent를 비동기적으로 로드합니다. 그리고 Suspense 컴포넌트를 사용하여 애니메이션 컴포넌트가 로딩되는 동안 “Loading…“이라는 텍스트를 보여줍니다.

실제 애니메이션 컴포넌트의 내용은 AnimatedComponent 파일에 구현되어 있습니다. 이 컴포넌트는 React.lazy()를 통해 비동기적으로 로드되므로, 애니메이션이 필요한 시점에서 로딩됩니다.

이와 같은 방식으로 리액트에서 애니메이션을 지연시킬 수 있습니다. “suspense”는 애니메이션 외에도 데이터 로딩 등 다양한 상황에서 유용하게 사용할 수 있습니다.

참고 자료:

• 리액트 공식 문서: Suspense
• 리액트 공식 문서: React.lazy()