React, Typescript, Emotion으로 Typesafe한 Theme 관리하기
by DD
5년 전
조회수 0
CSS in JS 방식의 스타일링을 위해 Emotion 라이브러리를 사용하며, React Context API를 활용하여 Theme 관리
Typescript를 통해 Theme의 타입 안정성을 확보하고, 컴포넌트 간의 Theme 속성 공유를 용이하게 함
ThemeProvider 확장 유틸을 통해 중첩된 Theme을 Typesafe하게 관리하고, Emotion 11 버전 마이그레이션 완료
Emotion ThemeProvider의 동작 원리
Emotion은 React Context API를 활용하여 ThemeProvider를 구현한다. 구체적으로, Context를 통해 Theme 객체를 하위 컴포넌트에 전달하고, styled 컴포넌트에서 props로 Theme에 접근한다. 따라서, 타입스크립트를 통해 Theme의 타입 안정성을 확보하고, 컴포넌트 간의 스타일 공유를 용이하게 한다.
Theme 확장 유틸의 장단점 분석
Theme 확장 유틸은 Context API의 중첩 기능을 활용하여 유연한 Theme 확장을 제공한다. 부모-자식 컴포넌트 간의 서로 다른 Theme 속성을 관리할 수 있다. 반면, 과도한 중첩은 코드 복잡성을 증가시키고, Theme 타입 관리에 추가적인 노력이 필요하다.
Emotion 11 마이그레이션 전략
Emotion 11로의 마이그레이션은 CreateStyled 및 StyledTags 타입 변경으로 인해 어려움이 있었다. 따라서, makeTheme 함수를 통해 Emotion 내부 타입을 확장하여 문제를 해결했다. 결과적으로, 타입 정의 확장을 통해 기존 코드를 유지하면서 마이그레이션을 완료했다.
