CSS-in-JS 라이브러리에서 Typesafe하게 Theme 관리하기
Emotion과 TypeScript를 활용해 CSS-in-JS 환경에서 중첩된 테마를 Typesafe하게 관리하는 방법을 소개한다.
Devsisters는 GatsbyJS와 TypeScript 환경에서 CSS-in-JS 라이브러리인 emotion을 사용하여 스타일을 관리한다. emotion의 ThemeProvider를 활용하면 공통 스타일을 정의하고 하위 컴포넌트에 props로 전달하여 효율적으로 관리할 수 있다.
TypeScript를 도입하면 ThemeProvider에 전달되는 테마 속성에 대한 타입 검사가 가능해진다. 기존 Theme 타입을 확장하여 styled 컴포넌트의 props에 적용함으로써, 정의되지 않은 속성 사용이나 잘못된 타입 입력을 방지할 수 있다.
프로젝트 구조가 깊어지는 Fractal 패턴을 사용할 경우, 하위 컴포넌트가 부모와 다른 테마 속성을 요구하는 중첩된 테마(Nested Theme) 상황이 발생한다. 이때 최상위 테마에 모든 속성을 정의하면 관리 효율이 떨어진다.
이를 해결하기 위해 React Context API와 Intersection Type을 결합한 makeTheme 유틸리티를 사용할 수 있다. 이 방식은 부모 테마와 새로운 테마 속성을 병합하여, 무한히 중첩 가능한 Typesafe한 테마 환경을 구축한다.
이 요약은 원문 이해를 돕기 위한 큐레이션입니다. 저작권은 원저작자에게 있으며, 정확한 내용과 맥락은 원문을 확인하세요.
요약 오류, 출처 표기 문제, 삭제 요청은 문의 · 건의로 알려주세요.