[React] custom Hook 파헤치기

✅custom Hook이란?

리액트의 기본 제공 훅(Hook)을 사용자가 자신의 요구에 맞게 만든 사용자 정의 훅을 의미합니다.
즉, 반복되는 로직을 리액트 내장 훅 들을 사용하여 구현한 '내가 만든(커스텀한) 훅'이다.
보통 Input과 Fetch를 관리할 때 주로 사용된다.

✅custom Hook을 사용하는 이유는?

• 코드 재사용성 향상: Custom Hook을 사용하면 상태 관리나 사이드 이펙트 관리 같은 로직을 여러 컴포넌트에서 쉽게 재사용할 수 있습니다. 이는 코드 중복을 줄이고 프로젝트의 유지보수성을 높여줍니다.

• 컴포넌트 간소화: 복잡한 로직을 컴포넌트 밖으로 분리함으로써, 컴포넌트 자체는 더 간결하고 명확해집니다. 이는 컴포넌트의 가독성과 관리 용이성을 높여줍니다.

• 사용자 정의 로직의 모듈화: useState, useEffect, useContext 같은 리액트의 내장 훅을 조합하여 만들 수 있다. Custom Hook을 통해 특정 동작이나 로직을 모듈화하여, 애플리케이션 전반에 걸쳐 일관된 방식으로 기능을 제공할 수 있습니다.

✅custom Hook 네이밍 규칙

커스텀 훅의 이름은 "use"로 시작해야 한다. ex)useFetchData, useCounter

✅custom Hook 사용시 주의사항

• 훅(hook)은 함수의 최상위 레벨에서만 호출해야 한다: 훅은 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안된다. 이 규칙을 지키면 훅의 호출 순서가 보장되어 훅의 내부 상태가 올바르게 유지된다.

• 훅(hook)은 리액트 함수 컴포넌트 내에서만 호출되어야 한다: 훅은 리액트의 함수 컴포넌트 또는 다른 훅 내부에서만 호출될 수 있다. 일반 JavaScript 함수에서 훅을 호출하면 안된다.

✅custom Hook 코드 예시

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 hook인 useCounter내에서 usestate(내장훅)을 사용하여 로직을 더욱 강력하게 만들어주었다.
• useCounter는 재사용 가능하며, 다양한 컴포넌트에서 간단하게 카운터 기능을 사용할 수 있다.

✅custom Hook 과제 적용 실습

 function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

입력 관리 및 유효성 검사 로직을 별도의 훅으로 분리.
각 입력 필드 (id, pw, nickname, phone)의 값과 변경 이벤트를 처리하는 로직을 공통적으로 사용하는 custom hook(useFormInput)을 정의.

function useValidation(value, rules) {
  const [isValid, setIsValid] = useState(true);

  useEffect(() => {
    setIsValid(rules.every(rule => rule.test(value)));
  }, [value, rules]);

  return isValid;
}

입력 값에 대한 유효성 검사 로직을 custom hook으로 분리.
이 훅은 입력 값과 유효성 검사 규칙을 받아 들여, 해당 입력이 유효한지 여부를 반환.

✅마무리

custom hook을 직접 과제에 적용해보며 컴포넌트를 더욱 유연하고, 재사용 가능하며, 관리도 용이하게 해주는 장점을 직접 느낄 수 있었다. 커스텀 훅을 적극 활용해보면 효과적인 컴포넌트 아키텍처를 구성해보자!