Custom Hook을 활용한 테마 커스터마이징 기능 추가

06 Nov 2023

reactjs

소개

React에서는 Custom Hook을 사용하여 기능을 추상화하고 재사용 가능한 로직을 작성할 수 있습니다. 이번 블로그 포스트에서는 Custom Hook을 활용하여 테마 커스터마이징 기능을 추가하는 방법에 대해 알아보겠습니다.

Custom Hook 작성하기

테마 커스터마이징 기능을 추가하기 위해서는 우선 Custom Hook을 작성해야 합니다. 이 Hook은 테마의 설정 값을 저장하고 가져올 수 있는 기능을 제공해야 합니다.

다음과 같이 useTheme라는 Custom Hook을 작성해보겠습니다.

import { useState } from 'react';

const useTheme = () => {
  const [theme, setTheme] = useState('light'); // 기본 테마는 light로 설정

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light')); // 테마 변경
  };

  return {
    theme,
    toggleTheme
  };
};

export default useTheme;

위의 Custom Hook은 theme과 toggleTheme이라는 두 가지 값을 반환합니다. theme은 현재 설정된 테마 값을 나타내고 toggleTheme은 테마를 변경하는 함수입니다.

컴포넌트에 Custom Hook 연결하기

Custom Hook을 작성했으면 이제 컴포넌트에 Custom Hook을 연결하여 테마 커스터마이징 기능을 사용할 수 있게 됩니다.

다음은 App 컴포넌트에서 Custom Hook을 사용하여 테마 커스터마이징 기능을 추가하는 예제입니다.

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

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

  return (
    <div className={`app ${theme}`}>
      <h1>Welcome to My App</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default App;

위의 예제에서 useTheme Hook을 호출하여 theme과 toggleTheme 값을 가져온 후, app 클래스에 현재 테마를 적용하고 테마 변경 버튼을 렌더링합니다. 테마 변경 버튼을 클릭하면 Custom Hook에서 제공하는 toggleTheme 함수가 실행되어 테마가 변경됩니다.

결론

Custom Hook을 활용하여 테마 커스터마이징 기능을 추가하는 방법에 대해 알아보았습니다. Custom Hook을 사용하면 로직을 추상화하고 재사용 가능한 기능을 작성할 수 있어 개발 효율성을 향상시킬 수 있습니다. 자신의 프로젝트에 테마 커스터마이징 기능을 추가하고 싶다면 이 방법을 활용해보세요.

참고 자료

#react #custom-hook