다크모드에서 react lazy 사용할 때 흰 화면이 보이는 이슈

이 문제는 React 애플리케이션에서 다크 모드를 지원하기 위해 CSS 테마 전환을 사용할 때 발생할 수 있습니다. 보통 React 애플리케이션에서는 다음과 같은 방법으로 CSS 테마 전환을 처리합니다. 1. 사용자가 다크 모드를 활성화하면 body 요소에 'dark' 클래스를 추가합니다. 2. 애플리케이션에서 CSS 선택자를 사용하여 테마에 따라 적절한 스타일을 적용합니다. 하지만 React Lazy를 사용할 경우 페이지 이동이 느려질 수 있기 때문에 페이지 이동이 발생할 때마다 흰색 배경이 나타날 수 있습니다. 이 문제를 해결하려면 React Suspense를 사용하여 로딩 화면을 추가하고, CSS 테마 전환에 대한 처리를 Suspense에서 수행하도록 변경하는 것이 좋습니다. 다음은 예시 코드입니다. 아래 코드에서는 'Suspense' 컴포넌트를 사용하여 로딩 화면을 추가하고, 'document.body.classList'를 사용하여 현재 테마에 따라 적절한 컴포넌트를 렌더링합니다. 이렇게 하면 페이지 이동이 느려져도 로딩 화면이 표시되므로 사용자가 흰색 배경을 보는 것을 방지할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { lazy, Suspense } from 'react';

// 다크 모드에서 사용할 컴포넌트
const DarkModeComponent = lazy(() => import('./DarkModeComponent'));

// 라이트 모드에서 사용할 컴포넌트
const LightModeComponent = lazy(() => import('./LightModeComponent'));

function MyComponent() {
  return (
    <div className={document.body.classList.contains('dark') ? 'dark' : 'light'}>
      <Suspense fallback={<div>Loading...</div>}>
        {document.body.classList.contains('dark') ? (
          <DarkModeComponent />
        ) : (
          <LightModeComponent />
        )}
      </Suspense>
    </div>
  );
}