React.lazy, Suspense

React.lazy와 Suspense를 사용하면 컴포넌트의 코드 스플리팅을 통해 성능을 최적화할 수 있습니다. 예를 들어, 다음과 같은 방식으로 React.lazy와 Suspense를 사용할 수 있습니다.

먼저, 별도의 파일로 두 개의 컴포넌트를 만듭니다.

1. ComponentA.js:

import React from 'react';

const ComponentA = () => {
  return <div>This is Component A</div>;
};

export default ComponentA;

2. ComponentB.js:

import React from 'react';

const ComponentB = () => {
  return <div>This is Component B</div>;
};

export default ComponentB;

이제 React.lazy와 Suspense를 사용하여 해당 컴포넌트를 동적으로 로드하는 메인 파일을 만듭니다.

3. App.js:

import React, { Suspense } from 'react';

// React.lazy를 사용하여 동적으로 컴포넌트 로드
const ComponentA = React.lazy(() => import('./ComponentA'));
const ComponentB = React.lazy(() => import('./ComponentB'));

const App = () => {
  return (
    <div>
      <h1>Lazy Loading Example</h1>
      <Suspense fallback={<div>Loading Component A...</div>}>
        <ComponentA />
      </Suspense>
      <Suspense fallback={<div>Loading Component B...</div>}>
        <ComponentB />
      </Suspense>
    </div>
  );
};

export default App;

요약:

• React.lazy(() => import('./Component'))는 컴포넌트를 동적으로 임포트합니다.
• Suspense 컴포넌트를 사용하여 로딩 중에 보여줄 폴백 UI를 정의합니다.

이 예시는 간단하지만, 실제 애플리케이션에서는 더 복잡한 컴포넌트 구조와 네트워크 요청이 포함될 수 있습니다. Lazy와 Suspense는 특히 큰 애플리케이션의 초기 로딩 시간을 단축하고 성능을 최적화하는 데 유용합니다.

추가로 react-query의 useQuery에서 suspense옵션을 사용하면 lazy로 컴포넌트를 감싸지 않아도 Suspense태그로 로딩 관리가 가능하다.