React는 사용자 정의 훅(Custom Hook)을 제공하여 코드를 재사용하고 컴포넌트 로직을 추상화하는 방법을 제공합니다. 이번 블로그 포스트에서는 Custom Hook을 사용하여 React 애플리케이션에서 테마 변경 기능을 구현하는 방법을 알아보겠습니다.

테마 변경 기능은 사용자가 애플리케이션의 색상, 폰트 등을 변경할 수 있는 기능을 의미합니다. 이를 구현하기 위해 먼저 useTheme라는 이름의 Custom Hook을 생성하겠습니다.

import { useState } from 'react';

const useTheme = () => {
  const [theme, setTheme] = useState('light');

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

  return [theme, toggleTheme];
};

export default useTheme;

위 코드에서 useTheme Custom Hook은 theme과 toggleTheme을 반환합니다. theme은 현재 선택된 테마를 나타내는 문자열이고, toggleTheme은 테마를 변경하는 함수입니다.

이제 애플리케이션에서 이 Custom Hook을 사용해보겠습니다. 예를 들어, 간단한 컴포넌트를 만들어서 현재 테마를 표시하고 테마 변경 버튼을 추가할 수 있습니다.

import React from 'react';
import useTheme from './customHooks/useTheme';

const ThemeSwitcher = () => {
  const [theme, toggleTheme] = useTheme();

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

export default ThemeSwitcher;

위 코드에서 useTheme Custom Hook을 사용하여 theme 변수와 toggleTheme 함수를 가져와서 사용합니다. Current Theme과 Toggle Theme 버튼을 렌더링하고, 버튼이 클릭되면 toggleTheme 함수가 호출되어 테마를 변경합니다.

이제 ThemeSwitcher 컴포넌트를 다른 컴포넌트에서 사용하면 애플리케이션에서 테마 변경 기능을 간단히 구현할 수 있습니다.

이처럼 Custom Hook을 사용하여 테마 변경 기능을 구현할 수 있습니다. Custom Hook을 사용하면 코드의 재사용성과 가독성을 높일 수 있으며, 애플리케이션의 로직을 간결하게 추상화할 수 있습니다.

#React #CustomHook