[React] - 커스텀 훅 이란?(Custom Hook) 간단하고 쉽게 이해하기 (예제코드)

 🧹 간단 정리 

커스텀 훅이란? 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한'내가 만든 훅'이라고 생각하면 된다.

쉽게 설명하자면 '반복되는 로직을 분리' 했는데
분리한 로직 속에 리액트 훅이 있다? > '커스텀 훅'
분리한 로직 속에 리액트 훅이 없다? > '(JS) 함수'

(자세한 내용은 아래 👀)

 

---

💁🏻‍♂️ 규칙

🎤 이름 규칙

- 커스텀 훅의 이름은 "use"로 시작해야 한다.

예를 들어, useCounter나 useFetchData와 같은 이름.

 

🥊 내장 훅(Hook) 사용

- 커스텀 훅 내에서 내장 훅(예: useState, useEffect)을 사용.

이렇게 하면 커스텀 훅의 로직을 더욱 강력하게 만들 수 있다.

🎁 상태와 함수 반환

- 커스텀 훅은 상태 값과 해당 상태를 업데이트하는 함수를 반환합니다.

예를 들어, 카운터를 관리하는 커스텀 훅은 현재 카운트 값과 카운트를 증가시키는 함수를 반환할 수 있다.

 

🧱 로직 모듈화

커스텀 훅은 비즈니스 로직을 모듈화 하고

여러 컴포넌트에서 재사용할 수 있는 추상화된 API를 제공하는 데 사용된다.

 

예를 들어, 로그인 상태 관리, 데이터 가져오기, 테마 설정, 폼 상태 관리 등과 같은 일반적인 로직을 커스텀 훅으로 추상화하여 코드를 더 간결하고 유지보수하기 쉽게 만들 수 있다

 

---

🧑🏻‍💻 예제 코드

정말 간단한 예제이니 "아 이런거구나" 하고 확인해 보자 :)

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;