프론트엔드 노트

다크모드는 오늘날 많은 웹 애플리케이션에서 필수적인 기능으로 자리 잡았습니다. 사용자들은 자신의 환경에 맞춰 인터페이스를 조정할 수 있는 선택권이 필요합니다. 이번 글에서는 React Hook을 활용하여 사용자 맞춤형 다크모드를 구현하는 방법을 알아보겠습니다.

다크모드 구현의 기본 개념

다크모드를 구현하기 위해서는 다음과 같은 단계를 따라야 합니다.

상태 관리: 다크모드의 상태를 저장할 방법이 필요합니다. 이를 위해 React의 useState Hook을 사용할 수 있습니다.
테마 적용: 다크모드가 활성화되면 CSS 클래스나 스타일을 변경하여 사용자의 시각적 경험을 조정합니다.
상태 유지: 사용자가 페이지를 새로 고침하더라도 설정한 테마가 유지되어야 합니다. 이를 위해 로컬 스토리지를 활용할 수 있습니다.

코드 예제

이제 위의 개념을 바탕으로 실제 코드로 보여드리겠습니다. 아래 코드는 다크모드를 구현하는 간단한 React 컴포넌트입니다.

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

const App = () => {
    const [isDarkMode, setIsDarkMode] = useState(false);

    // 컴포넌트가 마운트될 때 로컬 스토리지에서 다크모드 상태 가져오기
    useEffect(() => {
        const storedMode = localStorage.getItem('darkMode');
        if (storedMode === 'true') {
            setIsDarkMode(true);
            document.body.classList.add('dark-mode');
        }
    }, []);

    // 다크모드 토글 함수
    const toggleDarkMode = () => {
        setIsDarkMode(prevMode => !prevMode);
        document.body.classList.toggle('dark-mode');

        // 현재 상태를 로컬 스토리지에 저장
        localStorage.setItem('darkMode', !isDarkMode);
    };

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

export default App;

위의 코드에서 useState를 사용하여 isDarkMode라는 상태를 관리하고, useEffect를 통해 컴포넌트가 처음 렌더링될 때 로컬 스토리지에서 다크모드 상태를 확인하여 반영합니다. toggleDarkMode 함수는 버튼 클릭 시 다크모드를 토글하며, 그 상태를 로컬 스토리지에 저장합니다.

CSS 스타일링

다크모드를 시각적으로 구현하기 위해 CSS를 설정해야 합니다. 다음은 간단한 CSS 예제입니다.

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

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

이 CSS는 다크모드가 활성화된 경우 배경색과 글자색을 변경하여 사용자에게 보다 나은 시각적 경험을 제공합니다.

최적화 및 확장성

위의 기본적인 다크모드 기능 외에도, 추가적인 기능을 고려해 볼 수 있습니다.

사용자 설정 저장: 사용자가 다크모드 설정을 변경하면 이를 로컬 스토리지뿐만 아니라 서버에 저장하는 방법도 있습니다. 이렇게 하면 사용자가 다른 기기에서 로그인할 때도 동일한 설정을 사용할 수 있습니다.
시스템 테마 감지: 사용자의 운영체제나 브라우저의 테마 설정을 감지하여 자동으로 다크모드를 적용할 수 있습니다. 이 기능은 window.matchMedia를 통해 구현할 수 있습니다.
UI 개선: 버튼 외에도 스위치 같은 컴포넌트를 사용하여 사용자 경험을 개선할 수 있습니다.

마무리

이번 글에서는 React Hook을 활용하여 사용자 맞춤형 다크모드를 구현하는 방법을 살펴보았습니다. 상태 관리, 테마 적용, 로컬 스토리지 활용 등 다양한 개념을 소개하며 실용적인 예제를 제공하였으니, 이를 바탕으로 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 만들어 보시기 바랍니다. 다크모드는 단순한 기능 이상의 의미를 가지며, 사용자에게 더욱 편리한 환경을 제공하는 중요한 요소입니다.

React Hook을 활용한 사용자 맞춤형 다크모드 구현하기

다크모드 구현의 기본 개념

코드 예제

CSS 스타일링

최적화 및 확장성

마무리