[React] hook과 util의 구분 기준.

글쓴이는 이런걸 배우고 싶었는데, 딱히 알려주는 사람이 없어 해당 코드를 작성하는데 뭘 넣어야 하는지 항상 고민했다.

해당 내용을 읽어보는 것이 중요하다.

 

이전 회사 진짜... 배운 게 1도없네 -_-;;;

내 최악의 회사인듯...

 

리액트에서 유틸 함수와 훅의 차이를 이해하는 기준점은 다음과 같아.

 

📌 유틸 함수 vs 훅의 기준

 

구분 유틸 함수 (Utility Function) 훅 (Hook)

사용 목적 비즈니스 로직과 무관한 재사용 가능한 일반 함수 리액트의 상태(state)나 생명주기(lifecycle)과 관련된 로직

입출력 인풋을 받아 바로 결과 반환 (순수 함수) 내부에서 상태 관리 및 부작용 처리 가능

리액트 종속성 리액트와 무관 (어디서든 사용 가능) 리액트 내부에서만 사용 가능 (useState, useEffect 등과 함께)

예제 debounce, formatDate, capitalizeText useDebounce, useFetch, useDarkMode

 

🛠 예제 비교

 

✅ 유틸 함수 예시 (리액트와 무관)

 

export const debounce = (func, delay) => {

  let timer;

  return (...args) => {

    clearTimeout(timer);

    timer = setTimeout(() => {

      func(...args);

    }, delay);

  };

};

 

특징:

• debounce 함수는 단순히 특정 함수 실행을 지연시킬 뿐, 리액트의 상태나 생명주기와 관계없음

• 어디서든 (리액트가 아닌 환경에서도) 사용 가능

 

✅ 훅 예시 (리액트 내부 상태 활용)

 

import { useState, useEffect } from "react";



const useDebounce = (value, delay) => {

  const [debouncedValue, setDebouncedValue] = useState(value);



  useEffect(() => {

    const handler = setTimeout(() => {

      setDebouncedValue(value);

    }, delay);



    return () => {

      clearTimeout(handler);

    };

  }, [value, delay]);



  return debouncedValue;

};



export default useDebounce;

 

특징:

• 리액트의 useState와 useEffect를 사용

• 값이 변경될 때마다 상태 업데이트가 발생 → 컴포넌트에서 활용 가능

• 리액트 컴포넌트 내부에서만 사용 가능 (useDebounce 훅을 유틸 함수처럼 다른 프로젝트에서 바로 가져다 쓰기는 어려움)

 

✅ 정리

1. 리액트에 의존적이지 않고 단순한 기능을 제공한다면 👉 유틸 함수

2. 리액트의 상태 관리나 생명주기와 연관된다면 👉 훅

 

네가 만든 로직이 상태를 다루는가? 리액트 내부에서만 동작해야 하는가? 를 기준으로 판단하면 돼! 🚀