커스텀 훅이란?

• 개발자가 반복되는 로직을 리액트 내장 훅을 이용해 커스터마이징한 훅이다.

이름 규칙

• 커스텀 훅의 이름은 “use”로 시작해야한다. ex ) useCount.js, useFetch

상태와 함수 반환

• 커스텀 훅은 상태 값과 해당 상태를 업데이트 하는 함수를 반환

import { useState } from 'react';

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

  // count를 증가시키는 함수
  function increment() {
    setCount(count + 1);
  }

  // count를 감소시키는 함수
  function decrement() {
    setCount(count - 1);
  }

  // count를 리셋하는 함수
  function reset() {
    setCount(initialValue);
  }

  // 현재 count와 관련된 값을 반환하는 함수
  function getCount() {
    return count;
  }

  return {
    count,
    increment,
    decrement,
    reset,
    getCount,
  };
}

// 커스텀 훅 사용 예제
function Counter() {
  const counter = useCounter(0);

  return (
    <div>
      <p>Count: {counter.count}</p>
      <button onClick={counter.increment}>증가</button>
      <button onClick={counter.decrement}>감소</button>
      <button onClick={counter.reset}>리셋</button>
    </div>
  );
}

export default Counter;