Suspense를 사용하여 다른 컴포넌트의 렌더링을 중단시키는 방법은?

07 Nov 2023

polyfill

Suspense 컴포넌트를 사용할 컴포넌트에 추가합니다. ```jsx import React, { Suspense } from ‘react’;

function MyComponent() { return ( <Suspense fallback={<div>Loading…</div>}> {/* 중단시키고 싶은 컴포넌트 */} </Suspense> ); }

Suspense 컴포넌트는 fallback prop을 가지는데, 중단시키고 싶은 컴포넌트가 로딩되는 동안 이 fallback 컴포넌트를 보여줍니다.

2. 중단시키고 싶은 컴포넌트를 Suspense 컴포넌트 안에 포함합니다.
```jsx
import React, { Suspense } from 'react';

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

OtherComponent는 로딩되는 동안 fallback 컴포넌트가 보여지게 됩니다.

Suspense를 사용하여 다른 컴포넌트의 렌더링을 중단시키는 방법입니다. 이를 통해 비동기 작업이나 코드 스플리팅 등의 상황에서 사용자에게 로딩 상태를 보여줄 수 있습니다.

참고 자료:

React 공식 문서: https://reactjs.org/docs/react-api.html#suspense