React에서 다크모드 토글 컴포넌트 만들기

 

다크모드는 사용자 경험을 향상시키고, 눈의 피로를 줄이는 데 도움을 줄 수 있는 인기 있는 기능입니다. React를 사용하여 다크모드 토글 컴포넌트를 만드는 방법을 단계별로 설명하겠습니다. 이 글에서는 상태 관리, 스타일 적용, 그리고 토글 기능 구현을 포함하여 다크모드 토글 컴포넌트를 구축하는 전체 과정을 다룹니다.

1. 프로젝트 설정

먼저, 새로운 React 프로젝트를 생성합니다. 이미 프로젝트가 있는 경우 이 단계를 건너뛸 수 있습니다.

npx create-react-app dark-mode-toggle
cd dark-mode-toggle

2. 다크모드 상태 관리

다크모드의 상태를 관리하기 위해 React의 useState 훅을 사용합니다. 또한, 상태가 변경될 때마다 로컬 스토리지에 저장하여 사용자가 페이지를 새로 고침해도 상태가 유지되도록 합니다.

import React, { useState, useEffect } from 'react';

function DarkModeToggle() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode ? JSON.parse(savedMode) : false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', JSON.stringify(isDarkMode));
    if (isDarkMode) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode(prevMode => !prevMode);
  };

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

export default DarkModeToggle;

3. 스타일 적용

다크모드와 라이트모드에 대한 스타일을 정의합니다. 스타일을 쉽게 적용하기 위해 CSS 클래스를 사용합니다.

/* App.css */
body {
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body {
  background-color: #ffffff;
  color: #000000;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

4. 컴포넌트 사용

App.js 파일에서 DarkModeToggle 컴포넌트를 사용하여 다크모드 토글 기능을 적용합니다.

import React from 'react';
import DarkModeToggle from './DarkModeToggle';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React 다크 모드 토글</h1>
        <DarkModeToggle />
      </header>
    </div>
  );
}

export default App;

5. 완성된 코드

다음은 다크모드 토글 컴포넌트를 완성한 전체 코드입니다.

DarkModeToggle.js

import React, { useState, useEffect } from 'react';

function DarkModeToggle() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    const savedMode = localStorage.getItem('dark-mode');
    return savedMode ? JSON.parse(savedMode) : false;
  });

  useEffect(() => {
    localStorage.setItem('dark-mode', JSON.stringify(isDarkMode));
    if (isDarkMode) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode(prevMode => !prevMode);
  };

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

export default DarkModeToggle;

App.js

import React from 'react';
import DarkModeToggle from './DarkModeToggle';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>React 다크 모드 토글</h1>
        <DarkModeToggle />
      </header>
    </div>
  );
}

export default App;

App.css

body {
  transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

body {
  background-color: #ffffff;
  color: #000000;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

6. 결론

이제 React에서 다크모드 토글 컴포넌트를 성공적으로 구현했습니다. 이 컴포넌트는 상태 관리와 로컬 스토리지를 활용하여 사용자 경험을 개선하며, 스타일을 적용하여 시각적으로 매력적인 다크모드와 라이트모드를 제공합니다. 이 예제를 바탕으로 다양한 기능을 추가하고 사용자 인터페이스를 더욱 향상시킬 수 있습니다.