React 컴포넌트에서 커스텀 훅 작성하기

by

React에서 커스텀 훅(Custom Hook)을 작성하면 컴포넌트 간의 로직을 재사용하고 코드를 정리할 수 있습니다. 커스텀 훅은 함수명이 use로 시작하고, 다른 훅을 사용하거나 상태를 관리하는 등의 로직을 포함합니다. 이 글에서는 React 컴포넌트에서 커스텀 훅을 작성하고 활용하는 방법을 알아보겠습니다.


커스텀 훅의 구조

커스텀 훅은 보통 다음과 같은 구조를 가집니다.

import { useState, useEffect } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // 훅에서 필요한 작업 수행
  }, [value]); // 특정 상태에 따라 실행 여부 결정

  // 필요한 상태나 함수 등을 반환
  return [value, setValue];
}



커스텀 훅 작성 예제

예제 1: 로컬 스토리지 상태 관리

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setValue = value => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}


예제 2: 미디어 쿼리 리스너

import { useState, useEffect } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);

    const handleMatchChange = () => {
      setMatches(mediaQuery.matches);
    };

    mediaQuery.addListener(handleMatchChange);
    setMatches(mediaQuery.matches);

    return () => {
      mediaQuery.removeListener(handleMatchChange);
    };
  }, [query]);

  return matches;
}



커스텀 훅 활용하기

커스텀 훅을 작성한 후에는 다음과 같이 컴포넌트에서 활용할 수 있습니다.

function MyComponent() {
  const [count, setCount] = useCustomHook(0);
  // 또는
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {isMobile && <p>Mobile View</p>}
    </div>
  );
}



결론

커스텀 훅은 React 애플리케이션에서 로직을 재사용하고 컴포넌트 코드를 간결하게 유지하는 데 도움을 줍니다. 필요한 로직을 커스텀 훅으로 추상화하고, 여러 컴포넌트에서 재사용할 수 있도록 작성해보세요. 이로써 코드의 가독성을 높이고 유지보수를 용이하게 만들 수 있습니다.




Leave a Comment