배포 후 다크모드 활성화 상태에서 새로고침 시, 초기 라이트모드 화면이 출력되는 문제

[JeonggonCho]

문제상황

• state의 isDarkMode 값도 true
• localStorage의 isDarkMode 값도 true
• 하지만 새로고침하면 라이트모드로 되며 다크모드 버튼을 2번 클릭하거나, 다른 페이지로 이동 시, 다크모드가 적용됨

문제원인

• react를 기반으로 하는 Gatsby의 hydration으로 보임
• gatsby의 hydration 프로세스 : 정적 파일인 기본 테마를 웹 브라우저에서 우선 렌더링하고 클라이언트 측의 localStorage등의 정보를 읽어 교체하는 hydrate 과정이 생기기에 이 후에 토글을 하거나, 다른 페이지로 이동을 하면 테마가 적용되게 됨

시도 해볼수 있는 방법

• gatsby에서는 화면렌더링 전 적용할 수 있는 스크립트를 gatsby-ssr.js 파일에서 작성해 놓을 수 있음 이를 이용하여 해결해보려고 함