React에서 다크모드 적용하기

 

다크모드는 사용자 경험을 개선하고 눈의 피로를 줄이기 위해 많은 애플리케이션에서 채택하는 중요한 UI 기능입니다. React 애플리케이션에서도 다크모드를 쉽게 구현할 수 있습니다. 이번 글에서는 React에서 다크모드를 구현하는 방법, 관련 도구와 라이브러리를 활용한 최적화 전략을 살펴보겠습니다.

---

1. 다크모드란?

다크모드는 밝은 색상 대신 어두운 색상을 기본 테마로 사용하는 사용자 인터페이스 모드입니다. 주요 이점은 다음과 같습니다:

• 눈의 피로 감소: 특히 저조도 환경에서 사용자가 화면을 편안하게 볼 수 있습니다.
• 배터리 절약: OLED 화면에서는 어두운 색상을 사용할 때 에너지 소비가 감소합니다.
• 미적 감각: 현대적이고 세련된 디자인을 제공합니다.

React에서는 CSS 변수, 상태 관리, 그리고 컨텍스트 API를 활용하여 효율적으로 다크모드를 구현할 수 있습니다.

---

2. React에서 다크모드 구현하기

2.1 CSS 변수와 상태 관리

CSS 변수를 활용하면 다크모드와 라이트모드 간의 스타일 전환을 간단히 관리할 수 있습니다.

구현 방법

1. CSS 변수 정의:

:root {
  --background-color: white;
  --text-color: black;
}

[data-theme='dark'] {
  --background-color: black;
  --text-color: white;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

1. React 상태로 테마 관리:

import React, { useState } from 'react';

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  return (
    <div>
      <h1>다크모드 예제</h1>
      <button onClick={toggleTheme}>
        {theme === 'light' ? '다크모드로 전환' : '라이트모드로 전환'}
      </button>
    </div>
  );
}

export default App;

2.2 Context API 활용

Context API를 사용하면 애플리케이션 전반에 걸쳐 테마 상태를 쉽게 공유할 수 있습니다.

구현 방법

1. 테마 컨텍스트 생성:

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

1. 컨텍스트 사용:

import React from 'react';
import { ThemeProvider, useTheme } from './ThemeContext';

function ThemeToggler() {
  const { theme, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? '다크모드로 전환' : '라이트모드로 전환'}
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>다크모드 구현 예제</h1>
        <ThemeToggler />
      </div>
    </ThemeProvider>
  );
}

export default App;

---

3. 다크모드 구현 시 고려사항

3.1 사용자의 시스템 설정 반영

사용자의 운영 체제에서 설정된 다크모드를 자동으로 감지하려면 prefers-color-scheme 미디어 쿼리를 사용할 수 있습니다.

useEffect(() => {
  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const initialTheme = prefersDarkMode ? 'dark' : 'light';
  setTheme(initialTheme);
  document.documentElement.setAttribute('data-theme', initialTheme);
}, []);

3.2 로컬 스토리지로 상태 유지

사용자가 선택한 테마를 로컬 스토리지에 저장하여 페이지 새로고침 후에도 유지할 수 있습니다.

useEffect(() => {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    setTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }
}, []);

const toggleTheme = () => {
  const newTheme = theme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
  localStorage.setItem('theme', newTheme);
  document.documentElement.setAttribute('data-theme', newTheme);
};

---

4. 결론

React에서 다크모드를 구현하면 사용자 경험을 개선하고 애플리케이션의 가치를 높일 수 있습니다. CSS 변수, 상태 관리, Context API, 그리고 사용자 시스템 설정 감지를 활용하면 효율적이고 직관적인 다크모드를 구축할 수 있습니다.

지금 바로 다크모드를 적용하여 사용자 친화적인 애플리케이션을 만들어보세요!