[React] Custom hook 사용법

커스텀 훅(Custom Hook)이란?

리액트(React)에서 커스텀 훅(Custom Hook) 은 여러 컴포넌트에서 재사용할 수 있는 로직을 함수로 추출한 것입니다.

기본적인 훅(useState, useEffect 등)을 조합하여 특정 기능을 수행하는 커스텀 훅을 만들면,

코드의 재사용성을 높이고 가독성을 향상시킬 수 있습니다.

 

이번 글에서는 로컬 스토리지(localStorage)를 활용하여 다크 모드 상태를 저장하는 커스텀 훅을 만들어 보겠습니다.

반응형

---

로컬 스토리지와 다크 모드

웹사이트에서 다크 모드(Dark Mode) 를 구현할 때, 사용자의 설정을 유지하는 것이 중요합니다.

그렇지 않으면 페이지를 새로고침할 때마다 모드가 초기화되어 사용자 경험이 떨어질 수 있습니다.

 

이를 해결하기 위해 로컬 스토리지(localStorage) 를 사용하면 브라우저가 데이터를 저장하고,

사용자가 다시 방문했을 때 이전 상태를 복원할 수 있습니다.

---

useLocalStorage 커스텀 훅 만들기

로컬 스토리지에 값을 저장하고 불러오는 기능을 하는 useLocalStorage 훅을 만들어보겠습니다.

import { useState } from "react";

const useLocalStorage = (key, val) => {
  // state 초기값을 localStorage에서 가져오기
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : val;
    } catch (error) {
      return val;
    }
  });

  // 상태 변경 및 localStorage 업데이트
  const setValue = (value) => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
};

export default useLocalStorage;

 

🔍 useLocalStorage 설명

• key: 저장할 로컬 스토리지의 키 값 (예: "darkMode").
• val: 초기값 (예: false).
• useState의 초기값을 설정할 때, localStorage에 해당 키가 존재하는지 확인 후 값을 가져옴.
• setValue 함수는 상태를 변경할 뿐만 아니라, localStorage에도 값을 저장함.

---

ThemeToggle 컴포넌트 구현

이제 우리가 만든 useLocalStorage 훅을 사용하여 다크 모드를 토글할 수 있는 ThemeToggle 컴포넌트를 만들어보겠습니다.

import useLocalStorage from "./useLocalStorage";

const ThemeToggle = () => {
  const [isDarkMode, setIsDarkMode] = useLocalStorage("darkMode", false);

  return (
    <button onClick={() => setIsDarkMode(!isDarkMode)}>
      {isDarkMode ? "라이트 모드" : "다크 모드"}
    </button>
  );
};

export default ThemeToggle;

 

🛠 ThemeToggle 동작 방식

1. useLocalStorage를 이용해 isDarkMode 상태를 가져옴.
2. 버튼을 클릭하면 setIsDarkMode가 호출되어 상태를 변경하고, 변경된 값이 localStorage에 저장됨.
3. 사용자가 페이지를 새로고침하더라도 로컬 스토리지에 저장된 상태가 유지됨.

---

이번 글에서는 로컬 스토리지를 활용한 다크 모드 상태 저장 방법을 알아보았습니다.

• useLocalStorage 커스텀 훅을 활용하여 데이터를 저장하고 불러오는 방법
• ThemeToggle 컴포넌트를 이용해 다크 모드 토글 기능 구현

이제 여러분도 다양한 상태를 로컬 스토리지에 저장하는 커스텀 훅을 만들어 활용해보세요!