이번 포스트에서는 React에서 Suspense를 사용하여 비동기적으로 CSS 스타일을 로딩하는 방법에 대해 알아보겠습니다.

1. Suspense란?

Suspense는 React 16.6 이후부터 도입된 기능으로, 다른 컴포넌트들이 로딩되는 동안 로딩 상태를 보여주는 역할을 합니다. 주로 데이터 fetching이나 코드 스플리팅에서 사용됩니다.

2. CSS 스타일 비동기 로딩

일반적으로 React 애플리케이션에서는 CSS 스타일들을 한 번에 로딩하여 적용합니다. 하지만 스타일 시트가 많거나 복잡할 경우 초기 로딩 시간이 길어질 수 있습니다. 이런 경우에 Suspense를 사용하여 비동기적으로 CSS 스타일을 로딩할 수 있습니다.

2-1. React.lazy와 Suspense 사용

React.lazy와 Suspense를 이용하여 CSS 스타일을 비동기적으로 로딩할 수 있습니다. 먼저, React.lazy를 사용하여 CSS 파일을 동적으로 가져옵니다.

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

그리고 Suspense 컴포넌트를 사용하여 로딩 중일 때 표시될 fallback 컴포넌트를 설정합니다.

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <StyleComponent />
      </Suspense>
    </div>
  );
}

fallback에 표시될 컴포넌트는 로딩 중일 동안 보여질 내용을 정의합니다.

2-2. CSS 파일 분리

CSS 파일을 별도로 분리하고, 분리된 CSS 파일을 비동기적으로 로딩하도록 설정하는 방법도 있습니다.

먼저, 분리된 CSS 파일을 생성합니다.

// main.css
body {
  background-color: lightblue;
}

그리고 동적으로 CSS 파일을 가져오는 컴포넌트를 작성합니다.

const CssComponent = React.lazy(() => import('./main.css'));

Suspense와 함께 사용하여 로딩 중일 때 표시할 컴포넌트를 설정합니다.

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <CssComponent />
      </Suspense>
    </div>
  );
}

이렇게 하면 CSS 파일이 비동기적으로 로딩되며, 로딩 중일 때 fallback 컴포넌트가 표시됩니다.

3. 결론

이번 포스트에서는 Suspense를 사용하여 React 애플리케이션에서 비동기적으로 CSS 스타일을 로딩하는 방법에 대해 살펴보았습니다. Suspense를 사용하면 초기 로딩 시간을 줄이고 사용자 경험을 향상시킬 수 있습니다.

더 자세한 내용은 React 공식 문서를 참고하시기 바랍니다.

#React #CSS #Suspense