기본적인 투두리스트에 다크 모드를 적용하려는데 정적으로 'dark'를 명시하지 않으면 바뀌는 상태값대로 클래스명에 반영이 되어도 정적 빌드할 때 클래스명을 읽어오지 못하는 현상으로 다크모드가 적용되지 않는 문제가 발생했다.
당시 문제가 되는 코드:
| 동적 변수 `theme`을 클래스명에 바로 추가 => 동적 클래스네임 생성
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Content Configuration - Tailwind CSS
Configuring the content sources for your project.
tailwindcss.com
공식문서에서 권장하지 않는 클래스명 생성 방법이 내가 작성한 코드와 똑같았다.
공식문서는 늘 완성된 클래스명을 쓸 것을 권장한다.
해결한 코드 :
배운 점 : 동적 클래스명 생성에 들어가는 변수를 state로 관리하고 있어서 변경됨에 따라 요소의 클래스명에는 제대로 반영되었음에도 이걸 Tailwind가 읽어내지 못하는 원인은 못 찾았지만, SPA에서 동적으로 일부 요소만 re-render되면서 아예 DOM 자체의 클래스명을 다시 생성하는 것을 보고, 일부 요소의 리렌더링의 동작을 다시 이해할 수 있는 기회가 되었다.
그렇지만 텍스트로 클래스명을 고정해 버리니까 유지보수할 때 좀 어려울 것 같다는 생각이 들었다.
어떻게 하면 유지보수도 쉽고 재사용도 가능하게 코드를 작성할 수 있을지 고민해봐야겠다.
유지보수를 생각하면서 클래스명을 객체로 관리하고, 점표기법으로 그 속성에 접근하는 식으로 코드를 작성했지만, 나중에 타입스크립트를 도입할 때를 고려했을 때, `themeClass` 변수는 `darkClass`를 담은 객체가 될 수도 있고, 빈 문자열이 될 수도 있기 때문에 코드를 다시 다음과 같이 수정했다.
