리액트 공부하기 - 최적화 lazy & Suspense

 

 

리액트는 클라이언트 사이드 렌더링을 한다

= 서버에서 일단 비어있는 html 파일을 받아온 뒤, 같이 받아온 자바스크립트를 사용해서 최종화면을 그려준다는 뜻

자바스크립트를 사용해서 화면을 완성하기 때문에, 클라이언트가 렌더링의 주체가 된다

 

그런데 만약, 빈 html은 받아왔긴 한데.. 화면을 그리기 위한 javascript 파일이 엄청 크게 되면?

계속 빈 화면을 볼테고, 사용자는 답답함을 느끼겠다..

당장 필요하지 않는 페이지는 됐고,, 필요한 페이지 부터 우선. 최적화

 

=> 이럴 때 사용할 수 있는 Lazy, Suspense

 

---

1. Lazy. 

lazy 사용 방법은 다음과 같다. 임포트 해올 때, 첫번째와 같은 기본 방식이 아닌, 

import를 리액트 lazy 함수 사용해서 임포트 해오면 된다.

 

 

🔹 React.lazy()

• 동적 import를 통해 컴포넌트를 "필요할 때만" 로드하게 해줌.
• 즉, 번들 파일을 작게 나눠서 초기 로딩 속도를 빠르게 함 (코드 스플리팅).
•  

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

---

2. Suspense

로딩중.. 이라는 화면을 보게 된다.

Suspen사용 방법은 다음과 같다. suspense라는 컴포넌트를 리액트에서 꺼내서 쓰면 된다.

🔹 Suspense

• lazy로 불러오는 동안 로딩 중 화면(스피너, 메시지 등) 을 보여줄 수 있게 해줌.

import { Suspense } from 'react';

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