테마 상태를 위한 React Context

먼저 컨텍스트 형태에 맞는 기본값을 사용하여 createContext()를 호출하십시오: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} }). 기본값은 상위 제공자 없이 컴포넌트가 컨텍스트를 읽을 때만 사용되며, 격리된 컴포넌트를 테스트하는 데 도움이 됩니다.

ThemeProvider 컴포넌트는 모든 테마 로직을 담는 래퍼입니다. 마운트될 때 시스템 설정을 읽고, theme 상태를 관리하며, toggleTheme 함수를 제공하고, 자식 요소를 ThemeContext.Provider value={{ theme, toggleTheme }}로 감쌉니다. 컴포넌트 트리의 상단 가까이에 배치하십시오.

모든 하위 컴포넌트는 useContext(ThemeContext)를 호출하여 테마에 접근할 수 있습니다. 이 호출은 theme과 toggleTheme을 포함한 현재 컨텍스트 값을 반환합니다. 테마가 변경되면 컴포넌트가 자동으로 다시 렌더링되므로, 프롭을 일일이 전달하지 않아도 항상 최신 상태를 유지합니다.

CSS 변수는 루트 요소의 data-theme 특성에 의존합니다. ThemeProvider에서 theme이 변경될 때마다 실행되는 useEffect를 추가하십시오: document.documentElement.setAttribute('data-theme', theme). 이렇게 하면 React 상태와 CSS 계층이 매끄럽게 연결됩니다.

페이지를 새로고침해도 사용자의 선택을 유지하려면 테마가 변경될 때마다 localStorage에 기록하십시오: localStorage.setItem('theme', theme). 이 로직을 상태와 비슷한 쌍을 반환하고 모든 업데이트를 자동으로 저장하는 useLocalStorage 사용자 지정 훅으로 캡슐화할 수 있습니다.

테마 상태를 초기화할 때는 먼저 localStorage에서 읽으십시오: localStorage.getItem('theme'). 저장된 값이 없으면 window.matchMedia('(prefers-color-scheme: dark)').matches를 통해 시스템 설정을 대체값으로 사용하십시오. 이 초기화는 마운트될 때 한 번만 실행됩니다.

높은 순서부터 낮은 순서까지의 올바른 우선순위는 localStorage에 저장된 사용자 설정, 시스템 OS 설정, 하드코딩된 기본값(보통 밝은 테마)입니다. 이 순서를 사용하면 사용자가 항상 최종적으로 제어할 수 있으며, 앱에서 명시적으로 선택하지 않은 경우에는 OS 설정도 계속 반영됩니다.

모든 컴포넌트에서 직접 useContext(ThemeContext)를 호출하면 구현 세부 정보가 드러납니다. 대신 useTheme 훅을 내보내십시오: function useTheme() { return useContext(ThemeContext); }. 이제 컴포넌트는 내부 컨텍스트를 알 필요 없이 useTheme을 가져와 호출하면 됩니다.

toggleTheme 함수는 밝은 테마와 어두운 테마 사이를 전환합니다: setTheme(prev => prev === 'light' ? 'dark' : 'light'). 트리 어디에 있는 버튼이든 이를 실행할 수 있도록 컨텍스트를 통해 노출하십시오. 상태는 한 곳에서 관리하고, 전환 로직은 모든 곳에서 공유합니다.

컨텍스트 값 객체는 ThemeProvider가 렌더링될 때마다 새로 만들어집니다. 불필요하게 모든 컨텍스트 소비자가 다시 렌더링되는 것을 막으려면 useMemo로 감싸십시오: const value = useMemo(() => ({ theme, toggleTheme }), [theme]). 이는 컨텍스트 제공자에서 흔히 사용하는 성능 최적화입니다.

테스트에서는 ThemeProvider를 래퍼로 사용하는 사용자 지정 renderWithTheme 유틸리티로 렌더링을 감싸십시오. 격리된 테스트를 위해 간단한 모의 컨텍스트를 만들 수도 있습니다: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}. 이렇게 하면 특정 테마 상태에서 컴포넌트를 테스트할 수 있습니다.

앱 테마를 초기화할 때 높은 우선순위부터 낮은 우선순위까지 올바른 순서는 무엇입니까?

ThemeContext와 ThemeProvider를 만들고, 테마 상태를 관리하며 localStorage와 동기화하고 문서에 data-theme을 설정하도록 하십시오. 깔끔하게 사용하려면 useTheme 편의 훅을 사용하십시오. 우선순위는 저장된 설정, 시스템 설정, 기본값 순서입니다.