[TIL] React Suspense

공지애·2022년 6월 9일
0

Suspense

Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을 때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다. SPA의 단점은 한번에 사용하지 않는 모든 컴포넌트까지 불러오기 때문에 첫 화면이 렌더링 될 때까지의 시간이 오래 걸리는 것이다. React는 lazy를 통해 컴포넌트를 동적으로 import 할 수 있기 때문에 이를 사용하면 초기 렌더링 지연 시간을 어느 정도 줄일 수 있다. Router로 분기가 나누어진 컴포넌트들을 lazy를 통해 import 하면 해당 path로 이동할 때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 로딩되는 시간 동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 Suspense다.

0개의 댓글