React.lazy , Suspense(SkeletonUI)

김민기·2024년 2월 19일

토이 프로젝트를 진행하면서 Skeleton UI를 적용하였다. 적용하면서 React.lazy와 Suspense를 처음 사용하게 되었는데 React.lazy와 Suspense를 알아보고자 한다.

1. React.lazy

React.lazy는 동적으로 컴포넌트를 불러오는 방법이다. 보통 최상단에서 동적으로 컴포넌트를 불러오게 된다면 오류가 발생하는 것이 일반적인 상황인데, React.lazy를 사용하게 된다면 동적으로 컴포넌트를 불러올 수 있다.

보통의 컴포넌트는 빌드 할 때 한번에 번들링이 되어지지만 이는 대규모의 어플리케이션 같은 경우에서는 효율적이지 않을 수 있다. 하지만 React.lazy를 사용한다면, 처음 렌더링 되었을 때 불러와지지 않고 비동기적으로 필요할 때 렌더링이 되어진다. 이러한 점은 코드 스플리팅에 유리하다.

코드 스플리팅

리액트는 SPA(Single Page Aplication)이다. SPA의 CSR(Client Side Rendering)의 단점 중 하나는 초기로딩속도가 느리다는 점이다. 초기로딩속도가 느린이유는 빌드 할 때 모든 정보들을 불러오기 때문에 초기로딩속도가 느린데, 이는 사용자 경험 측면에서 보았을 때 좋지 않다. 이를 해결 하기위해 코드 스플리팅을 적용한다

React.lazy의 사용법

import문을 최상단에서 사용하지 않고, 컴포넌트 내부에서 선언하여 사용한다.
이런 식으로 컴포넌트를 선언하면 비동기적으로 사용가능하다.

2. Suspense

만약 React.lazy를 사용하여 컴포넌트를 불러올 경우 첫 렌더링시 빈화면이 보여지게 된다. 이를 방지하기 위하여 Suspense라는 기능을 사용 할 수 있는데, React.lazy로 불러온 컴포넌트를 렌더링 하기 전 보여지는 컴포넌트를 설정 할 수 있다.

Suspense의 사용법

fallback이라는 prop을 통해 설정 가능하다.

이런식으로 React.lazy로 감싼 컴포넌트를 Suspense로 감싸주면 컴포넌트가 로딩되는 동안 빈화면이 보여지지 않고 fallback에서 설정한 컴포넌트를 보여주게된다.

React.lazy와 Suspense의 전체적인 구조

import React, { Suspense } from 'react';


function App() {
  const MyLazyComponent = React.lazy(()=>import('./MyLazyComponent'));
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}> // 
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

3. SkeletonUI

보통의 웹사이트에서는 컴포넌트가 로딩 될 때 동안 빈화면으로 내버려두지 않고, 스켈레톤ui나 스피너를 사용한다. 나는 이번 토이프로젝트에는 스켈레톤ui를 사용하기로 했다. 스켈레톤 ui는 ui를 암시하는 형태로써 ui의 뼈대를 나타내면 된다. 라이브러리로도 구현이 되어지지만 직접 구현해보기로 했다.