ThemeContext는 UI 애플리케이션에서 “테마(색상, 폰트, 간격 등 스타일 관련 값)”을 전역적으로 공유하고 관리하기 위해 사용하는 컨텍스트 개체를 가리킵니다. 구체적으로는 컴포넌트 트리 어디에서든 테마 값을 읽거나 변경할 수 있게 해 주며, prop 전달(“prop drilling”)을 피할 수 있게 해 줍니다. 주요 개념 - 중앙화된 테마 객체: 색상 팔레트, 타이포그래피, 스페이싱, 그림자 등. - 제공자(Provider): 트리 상단에서 테마 값을 내려줌. - 소비자(Consumer) 또는 훅: 하위 컴포넌트가 테마를 읽고(또는 변경) 사용할 수 있게 함. - 동적 전환: 런타임에 다크/라이트 모드 등 테마를 바꾸는 기능을 쉽게 구현. React에서의 전형적 사용 예 (간단한 흐름) - createContext으로 ThemeContext 생성 - Provider로 theme 값을 감싸서 전달 - useContext(ThemeContext)로 하위에서 사용 예시 (간단한 JavaScript/React): const ThemeContext = React.createContext({ theme: 'light', setTheme: () => {} }); function ThemeProvider({ children }) { const [theme, setTheme] = React.useState('light'); const value = React.useMemo(() => ({ theme, setTheme }), [theme]); return {children}; } function ThemedButton() { const { theme, setTheme } = React.useContext(ThemeContext); return ( ); } 고려사항 및 권장사항 - 성능: Context 값이 바뀌면 해당 컨텍스트를 구독하는 모든 컴포넌트가 리렌더링됩니다. 자주 바뀌는 값과 잘 바뀌지 않는 값을 분리하거나 value를 useMemo로 감싸세요. - 타입 안정성: TypeScript에서는 Theme 타입을 정의하고 Context에 제네릭으로 넣으면 안전합니다. - 스타일 라이브러리와의 통합: styled-components, Emotion 등은 자체 ThemeProvider를 제공하지만 개념은 동일합니다. CSS 변수(커스텀 프로퍼티)를 사용하면 CSS 레벨에서 테마 전환을 빠르게 처리할 수 있습니다. - SSR(서버사이드 렌더링): 서버와 클라이언트의 초기 테마가 일치하도록 관리하세요(예: 사용자 설정을 서버에서 미리 적용). - 접근성: 명도 대비(contrast) 등 접근성 규칙을 충족하도록 테마를 설계하세요. 다른 플랫폼 - Flutter나 Android 같은 다른 프레임워크에도 유사한 개념이 있습니다(예: Flutter의 Theme, Android의 Context+Theme). 목적은 동일: 전역 테마 값의 공유와 재사용. 요약 ThemeContext는 애플리케이션 전반에서 일관된 시각적 스타일을 제공하고 런타임에 테마를 중앙에서 관리·교체할 수 있게 해 주는 컨텍스트 패턴입니다.
