[React] DarkMode 새로고침시 화면 깜빡임문제 해결 - useLayoutEffect

[React] DarkMode 새로고침시 화면 깜빡임문제 해결 - useLayoutEffect

안녕하세요. 이번 포스팅 에서는 useLayoutEffect Hook에 대해 간단히 소개하고,
UseLayoutEffect Hook을 이용해, DarkMode에서 새로고침시 화면이 깜빡이는 문제를 해결하는 방법에 대해 알아보겠습니다.

useLayoutEffect & useEffect

• useLayoutEffect는 기본적으로 useEffect와 형태가 동일합니다.

  useLayoutEffect(() => { 
  	effect(); 
      return () => { 
      	cleanup(); 
      }; 
   }, [input])

useEffect와 useLayoutEffect의 차이점

• useEffect는 DOM이 화면에 그려진 이후에 호출됩니다.
  그렇기 때문에 useEffect를 이용해서 Layout을 변경할 경우, 새로고침시 화면이 깜빡이는 문제가 발생할 수 있 습니다. 이전 상태가 그려진 이후에, Layout이 바뀌기 때문이죠.
• useLayoutEffect는 이러한 문제를 해결하기 위해 등장했습니다.
  useLayoutEffect는 DOM이 화면에 그려지기 전에 호출됩니다. 따라서, useLayoutEffect를 이용해 Layout을 변경할 경우, Layout이 변경된 이후에 DOM이 그려지기 때문에 새로고침시 깜빡임이 발생하지 않습니다.

Dark모드에서의 useEffect와, useLayoutEffect 차이

useEffect - 화면깜빡임 발생

useEffect(() => {
    localStorage.getItem('data-theme') === 'dark'
    ? setIsDark(true)
    : setIsDark(false);
}, []);

useLayoutEffect - 화면깜빡임 발생 X

useLayoutEffect(() => {
    localStorage.getItem('data-theme') === 'dark'
    ? setIsDark(true)
    : setIsDark(false);
}, []);