배경
리코일로 전역으로 테마 값을 관리하는 방법과, css 클래스 변화를 통한 테마 변경 중, 후자를 선택
1.
런타임에서 성능상 이득이 있기 때문이다.
2.
전역상태관리를 통해 테마값을 관리한다면, provider를 통해 theme 에 새로운 객체를 넘겨주는 식으로 구현할 텐데, 이 경우, theme 객체가 바뀌며 모든 컴포넌트에서 리렌더링과 재계산이 일어난다.
3.
대신 css 클래스 변화에 따른 테마 변경 방법을 사용하면, 브라우저의 스타일 재계산은 이루어지겠지만, React 상에서 상태 변경은 없으므로 성능상 이득이 있다. 사용자에게도 더 빠른 피드백을 제공할 수 있다는 의미.
4.
새로고침시 테마 상태 보존을 위한 로컬스토리지 활용했다.
문제점
app.tsx에서 useEffect를 통해 페이지가 마운트될때, 테마값을 로컬스토리지에서 읽어와 적용하도록 했다. 하지만 기본적인 class 값이 light 모드에 맞춰져 있기 때문에, light 모드가 먼저 실행 → DOM 렌더링 이후 → useEffect 가 실행되며 로컬스토리지 값을 읽어오기 때문에, 한번 깜빡임 이후 다크모드로 변경된다.
해결방안
useEffect 대신 useLayoutEffect를 사용해 렌더링된 컴포넌트가 화면에 그려지기 전에 동기적으로 실행되도록 해결했다.
React Hook의 실행 순서를 나타낸 그림