React Suspense & Lazy

1. Suspense

 

Suspense로 감싼 컴포넌트가 렌더링 될 때  fallback 속성으로 넘긴 컴포넌트를 먼저 보여줍니다.

 

추후 렌더링이 끝나면 감싸져 있는 해당 컴포넌트를 보여주게 됩니다. 

 

데이터 로딩과 UI 렌더링이 분리되어 코드 가독성과 유지보수에도 도움이 많이 되는 것 같습니다.

 

 

<Suspense fallback={<div>Loading...</div>}>
      <TestComponent />
</Suspense>

 

Suspense 적용 후

 

 

 

2. Lazy

 

Lazy 함수를 사용하면 동적 import를 통해 컴포넌트를 렌더링 할 수 있습니다.

 

동적 import()를 호출하는 함수를 인자로 가지며, 꼭 Suspense 하위에서 렌더링 되어야합니다.

 

 

const TestComponent = lazy(() => import("../page/unauthed/RedirectPage"));

 

 

 

 

Suspense와 Lazy를 사용해서 로딩, 코드분할을 통해 앱의 성능을 향상시켜봅시다!