커스텀 hook 만들기

import React from "react";
import useCounter from "./useCounter"; // 위에서 만든 useHook 

function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(5);
  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>➕Increase</button>
      <button onClick={decrement}>➖Decrease</button>
      <button onClick={reset}>🔄Reset</button>
    </div>
  );
}

export default CounterComponent;

React에서 Custom Hook은 useState, useEffect, useRef 등의 기본 Hook을 조합하여 재사용 가능한 로직을 만들어 사용할 수 있게 해줍니다.
커스텀 훅의 네이밍 규칙은 "use"로 시작해야 하며, 내부에서 hook을 호출할 수 있습니다.

 

useHook의 기본구조를 살펴보면 아래와 같습니다.

import { useState, useEffect } from "react";

function useCustomHook() {
  const [state, setState] = useState(null);

  useEffect(() => {
    console.log("Custom Hook Mounted!");

    return () => {
      console.log("Custom Hook Unmounted!");
    };
  }, []);

  return [state, setState];
}

 

위의 구조를 참고해서 counter hook 을 만들고 호출도 해봅시다.

// 커스텀 useCounter 

import { useState } from "react";
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  const reset = () => setCount(initialValue);
  return { count, increment, decrement, reset };
}
export default useCounter;

 

이렇게 나만의 custom hook을 사용해서 재사용성을 높이고, 코드 분리를 하여 코드를 최척화 가능합니다. 

저는 모든 플젝에서 많이 사용하고 있습니다. 😉