🌚 다크모드에서 새로고침 시 라이트모드가 잠깐 보이는 문제

분야	작성자	작성일
FE	조배경	24년 12월 03일

다크모드 상태에서 새로고침 시 라이트모드가 잠깐 깜빡한다.

다크모드일 때, 새로고침을 하면 라이트모드가 잠깐 보였다가 다크모드로 세팅된다.

원인이 뭘까?

어떻게 테마를 변경하고 있나?

context를 통해서, 테마를 사용해야하는 컴포넌트에 뿌려주고 있다. (사이드바, 그래프)

// themeProvider.tsx
useEffect(() => {
  document.body.classList.toggle('dark', theme === 'dark');
}, [theme]);

• theme이라는 테마 상태가 변경될 때마다, theme이 dark일 때 body에 dark 클래스를 넣어주어 화면을 업데이트한다.

당연히 theme이라는 상태를 감지해야하니 useEffect가 적합하다고 생각했다.

useEffect를 제거해보면 어떨까?

useEffect를 제거하고 document.body.classList.toggle('dark', theme === 'dark');만 작성한다면, 깜빡임 현상이 없어진다.

useEffect로 감싸는 것과 그렇지 않은 것이 무슨 차이가 있는걸까?

1. useEffect로 감싸는 경우

   React DOM이 업데이트가 완료된 후에 useEffect가 실행되므로, 잠깐 지연이 발생할 수 있다.

   실제로 디버깅을 해보면, useEffect가 최초 실행됐을 땐 라이트모드이고 내부 로직이 실행되어야만 다크모드가 적용된다.

   이 찰나의 순간이 우리에게 깜빡임으로 보이는 것이다.

   

   개발자도구를 보면 useEffect 내부에 있을 때 일단 라이트모드이고, document.body… 가 실행되어야 다크모드가 적용된다.

2. useEffect로 감싸지 않는 경우

   useEffect로 감싸지 않는다면 리액트의 렌더링 사이클의 일부로 취급되어, 테마 변경이 렌더링 과정에서 바로 실행된다.

   또한 document.body.classList.toggle('dark', theme === 'dark'); 여기서의 theme은 useState로 관리되고 있기 때문에, 상태가 변경될 때마다 해당 provider가 리렌더링 되어 테마 변경이 일어난다.