Custom hook

: 사용자(개발자)가 직접 만드는 hook이다.
: 사용시 use를 앞에 붙인다.
: useState, useEffect와 같은 내장 훅을 사용한다.
: 코드의 중복과 재사용성, 효율적 관리를 위해 사용
: 배열 또는 obj를 리턴한다

왜 사용하냐에 대해서 생각해 봤을 때, 같은 로직을 반복적으로 사용하는 것에 대한 귀찮음?이 큰 부분을 차지해 한 곳에 몰아놓고 필요할 때 꺼내 사용하게 하는 기능인 듯 싶다.

• 커스텀 훅들은 따로 hooks라는 폴더 안에서 관리하는 방식으로 디렉토리 구조를 설계한다.

리액트 공식문서를 참고하면 왜 사용하는가에 대한 이해가 쉽다.

예시>

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;

간략하게 예시 코드를 통해서 custom 훅이 어떻게 사용 되는지 알 수 있다.
위와 같은 코드는 간략해서 크게 체감하지 못하지만 코드의 양이 많거나 복잡한 코드가 작성되어 있을 때 확실한 효과를 볼 수 있다고 생각한다.