커스텀 훅 만들기

 

커스텀 훅 이란?

커스텀 훅은 React의 기본 훅(useState, useEffect, useReducer 등) 을 활용하여 재사용 가능한 로직을 함수로 추출한 것이다. 이를 통해 여러 컴포넌트에서 공통된 로직을 손쉽게 공유할 수 있다.

즉 기존에 있는 React 훅을 이용해서 새로운 훅을 만들고 이름을 use로 시작하면 커스텀 훅(Custom Hook)이 된다.

 

 

커스텀 훅 만들기 예제

1. useCounter 커스텀 훅 만들기

import { useState } from 'react';

// 커스텀 훅 정의
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(prevCount => prevCount + 1);
  const decrement = () => setCount(prevCount => prevCount - 1);

  return {
    count,
    increment,
    decrement
  };
}

export default useCounter;

 

이 커스텀 훅은 카운터 값을 관리하고, 값을 증가시키거나 감소시킬 수 있는 기능을 제공한다.

 

2. useCounter 훅을 컴포넌트에서 사용하기

import React from 'react';
import useCounter from './useCounter'; // 커스텀 훅 임포트

function Counter() {
  const { count, increment, decrement } = useCounter(0); // 초기값 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
    </div>
  );
}

export default Counter;

 

 

커스텀 훅의 특징

• use 접두사 : React의 규칙에 따라 커스텀 훅의 이름은 use로 시작해야 한다.
• 상태관리 : useState, useEffect등 기본 훅을 사용하여 상태를 관리할 수 있다.
• 재사용성 : 여러 컴포넌트에서 공통 로직을 재사용할 수 있다.
• 리턴 값 :  커스텀 훅은 객체나 배열을 리턴하여 필요한 값을 반환한다.

 

커스텀 훅의 활용 예시

• 로컬 스토리지 관리(useLocalStorage)
• API데이터 패칭(useFetch)
• 폼 관리(useForm)
• 윈도우 크기 조정 추적(useWindowSize)