React_lazy loading

Rock Kyun·2023년 11월 20일

오늘의 학습

웹 최적화
React.lazy()
React.Suspense

React 최적화 이유

React로 만든 웹은 CSR(Client Side Redering) 작동 방식이다.
CSR의 문제는 필요한 때마다 서버에서 받는 것이 아닌,
시작부터 모든 페이지에 필요한 리소스(이미지, 스크립트, 컴포넌트)를
전부 받아놓고 시작하는 것이다.

따라서 사이트 첫 방문 시 초기 로딩이 오래 걸리는데.

이 문제를 해결하기 위해 리소스를 필요한 때에 불러오도록 하는 방법인 lazy import 이다.

Lazy Loading

Lazy Loading은 웹 성능 향상 방법 중 하나로
초기 렌더 시 필요하지 않은 리소스는 로드하지 않는 것이다.

예시)
대량의 이미지를 사용하는 웹에서 사용자에게 보여지는 부분만 로드하고
보여지지 않는 부분은 나중에 필요 시 로드되게 하는 것

React.lazy()

코드 스플리팅을 편하게 해주는 함수

코드 스플리팅?
큰 번들을 작은 덩어리로 분할 하는 과정.
웹의 초기 로딩 시간을 줄이는 데 도움을 준다.
React.lazy 함수는 컴포넌트를 동적으로 import하여
Promise에 담긴 컴포넌트를 반환(컴포넌트를 비동기적으로 로드)
React.lazy 에 담긴 컴포넌트는 <React.Suspense>로 감싸야 한다.
이는 로드 전/후에 따라 UI를 보여주기 위함이다.

// 컴포넌트를 반환하는 Promise
const HeavyComponent = React.lazy(() => import('./HeavyComponent'))'


function App() {
  return (
    <div>
    // 로딩 전에는 <div>Loading...</div> 이 보여진다.
      <React.Suspense fallback={<div>Loading...</div>}>
    // 필요하기 전에는 로드가 되지 않는다. (비동기적 로드)
        <HeavyComponent />
      </React.Suspense>
    </div>
  );
}

React.Suspense

동작방식

실제 컴포넌트가 로드 되기까지 대기시키고
로드되는 동안 대체 UI를 보여주는 컴포넌트.

fallback

실제 컴포넌트가 로드 되기 전까지 보여줄 UI를 정의하는 props
로드 될 실제 컴포넌트에 따라 fallback UI를 구성하는 것이 좋다.

예시)
<UserProfile/> (Main Component) ---> <h1>Loading user profile...<h1> (fallback)
<UserPosts/> (Main Component) ---> <h1>Loading user posts...<h1> (fallback)