컨텍스트 API를 활용한 테마 토글 기능 구현: 어두운 모드와 밝은 모드 전환 기능 추가하기.

작성일 : 2024-06-23

컨텍스트 API를 활용한 테마 토글 기능 구현: 어두운 모드와 밝은 모드 전환 기능 추가하기

소개

현대 웹 애플리케이션에서는 사용자 경험을 향상시키기 위해 개별 사용자 설정에 맞추어 테마 모드를 제공하는 경우가 많습니다. 어두운 모드와 밝은 모드를 전환할 수 있는 테마 토글 기능은 이러한 사용자 맞춤형 경험을 제공하는 대표적인 예입니다. 이번 글에서는 React의 컨텍스트 API를 사용하여 이러한 테마 토글 기능을 구현하는 방법을 단계별로 설명하겠습니다.

컨텍스트 API란?

React의 컨텍스트 API(Context API)는 깊게 중첩된 컴포넌트 트리를 통하지 않고도 데이터를 전역에서 공유할 수 있도록 도와주는 강력한 기능입니다. 이를 통해 전역 상태를 관리하고 다양한 컴포넌트 간의 데이터 공유를 손쉽게 관리할 수 있습니다. 컨텍스트 API를 사용하면 전역 상태를 필요로 하는 값을 부가적인 작업 없이 쉽게 전달할 수 있습니다.

테마 토글 기능 구현하기

테마 토글 기능을 구현하기 위해 다음과 같은 단계로 작업을 진행합니다:

테마 컨텍스트 생성
테마 프로바이더 구성
테마를 적용할 컴포넌트 구현
테마 토글 기능 연결

1. 테마 컨텍스트 생성

먼저 테마를 관리할 컨텍스트를 생성합니다. ThemeContext는 테마 상태와 테마를 토글하는 함수를 포함합니다.


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

const ThemeContext = createContext();

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

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

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

export const useTheme = () => useContext(ThemeContext);

위 코드는 테마 컨텍스트를 생성하고 테마 상태와 테마를 토글하는 함수를 제공하는 ThemeProvider 컴포넌트를 정의합니다. useTheme 훅을 통해 쉽게 컨텍스트 값을 사용할 수 있도록 합니다.

2. 테마 프로바이더 구성

이제 ThemeProvider를 애플리케이션의 루트 컴포넌트에 추가하여 전역 테마 상태를 설정합니다.


javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from './ThemeContext';

ReactDOM.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

이렇게 하면 애플리케이션 내의 모든 컴포넌트가 테마 컨텍스트에 접근할 수 있게 됩니다.

3. 테마를 적용할 컴포넌트 구현

테마를 적용할 컴포넌트를 만들어 봅시다. useTheme 훅을 사용하여 현재 테마에 따라 스타일을 적용합니다.


javascript
import React from 'react';
import { useTheme } from './ThemeContext';
import './App.css';

const ThemedComponent = () => {
  const { theme } = useTheme();

  return (
    <div className={`container ${theme}`}>
      <h1>This is a {theme} theme!</h1>
    </div>
  );
};

export default ThemedComponent;

위 컴포넌트는 theme 값을 받아서 container 클래스에 현재 테마를 추가합니다. App.css 파일에서 각 테마에 대한 스타일을 정의합니다.


css
.container {
  padding: 20px;
  text-align: center;
}

.light {
  background-color: #fff;
  color: #000;
}

.dark {
  background-color: #333;
  color: #fff;
}

4. 테마 토글 기능 연결

테마 토글 버튼을 추가하여 사용자가 테마를 전환할 수 있도록 합니다.


javascript
import React from 'react';
import ThemedComponent from './ThemedComponent';
import { useTheme } from './ThemeContext';

const App = () => {
  const { toggleTheme } = useTheme();

  return (
    <div>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <ThemedComponent />
    </div>
  );
};

export default App;

위의 코드는 테마 토글 버튼을 추가하고 toggleTheme 함수를 연결하여 버튼 클릭 시 테마가 전환되도록 합니다. 이제 애플리케이션을 실행하면 테마 토글 기능이 정상적으로 작동하는 것을 확인할 수 있습니다.

결론

React 컨텍스트 API를 사용하면 전역 상태 관리가 더욱 용이해지며, 사용자 경험을 향상시키기 위한 다양한 기능을 구현할 수 있습니다. 이번 글에서는 테마 토글 기능을 구현하기 위한 전 과정을 살펴보았습니다. 이 같은 방법을 응용하면 다양한 전역 상태를 관리하고 사용자 맞춤형 기능을 쉽게 추가할 수 있습니다.