🌗 56. React Native 테마 시스템 완전 정리 — 다크 모드, 시스템 연동, 전역 관리까지

---

모바일 앱에서 다크 모드 지원은 거의 필수다.
하지만 단순히 색상만 바꾸는 게 아니라,
앱 전체에서 일관된 테마를 적용하고, 전역에서 관리하는 구조를 갖추는 게 중요하다.

이번 글은 React Native에서 테마(라이트/다크)를 적용하고 전역 상태로 관리하는 전략을 정리한 글이다.

---

✅ 1. 시스템 테마 감지 — useColorScheme

import { useColorScheme } from 'react-native';

const scheme = useColorScheme(); // 'light' | 'dark'

• iOS/Android 모두 시스템 설정에 따라 light or dark 반환
• 앱 초기 진입 시 기본값으로 설정 가능

---

🧱 2. 전역 테마 상태 관리 (Zustand)

npm install zustand

const useThemeStore = create((set) => ({
  theme: 'system', // 'light' | 'dark' | 'system'
  setTheme: (theme) => set({ theme }),
}));

• 유저가 수동으로 테마 설정 가능
• system 테마는 useColorScheme()로 연동

---

🎨 3. 테마 객체 설정

export const LightTheme = {
  background: '#ffffff',
  text: '#000000',
};

export const DarkTheme = {
  background: '#000000',
  text: '#ffffff',
};

• 구조화해서 유지보수하기 좋게
• 버튼, border 등 다양한 키 포함 가능

---

💅 4. styled-components 전역 ThemeProvider 적용

npm install styled-components

<ThemeProvider theme={currentTheme}>
  <App />
</ThemeProvider>

const currentTheme = userTheme === 'system'
  ? scheme === 'dark' ? DarkTheme : LightTheme
  : userTheme === 'dark' ? DarkTheme : LightTheme;

✅ Text, View 등의 색상 분기 처리가 쉬워짐

---

🧩 5. tailwind-rn을 사용하는 경우

npm install tailwind-rn

• tailwind.config.js에서 darkMode: 'class' 설정
• useColorScheme()로 클래스 조건 분기 처리 가능
• styled-components보다 반응형 구성에 유리

---

🧠 테마 전환 버튼 예시

const toggleTheme = () => {
  const current = useThemeStore.getState().theme;
  useThemeStore.setState({
    theme: current === 'dark' ? 'light' : 'dark',
  });
};

✅ 버튼 누를 때 라이트 ↔ 다크 전환 UX 구현
✅ 테마 선택 상태는 AsyncStorage에 저장해서 유지

---

📱 테마 테스트 팁

플랫폼	다크모드 설정
iOS 시뮬레이터	Settings > Developer > Appearance
Android 에뮬레이터	Settings > Display > Dark Theme
Expo Go	자동 감지 or manual switch 가능

---

📝 내가 느낀 점

초기에는 그냥 useColorScheme()만 써도 되는 줄 알았는데,
유저가 직접 테마를 설정하고
그 상태가 앱 전체에서 일관되게 적용되기 위해서는
상태관리 + 테마 객체 + UI 프레임워크 연동이 모두 필요했다.

지금은 Zustand로 테마 상태를 관리하고,
styled-components로 테마 객체를 적용해서
앱 전역에서 일관된 테마 UI를 제공하고 있다.

---

🌙 “좋은 테마는 색상이 아니라 구조에서 시작된다.”

---