React - 커스텀 훅(Custom Hook)만들기

커스텀 훅이란?

커스텀 훅은 기본 리액트훅 (useEffect, useState, useRef등)을 조합해서 만든 사용자 정의 함수이다. 이름은 반드시 use로 시작해야 하며, 내부에서 다른 훅을 호출할 수 있다. 커스텀 훅을 사용하면 컴포넌트의 로직을 추상화하고 깔끔하게 관리할 수 있다.

 

커스텀 훅 기본패턴

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

  // 기능 정의
  const updateState = () => setState(...);

  return { state, updateState };
}

컴포넌트 사용법

const { state, updateState } = useCustomHook();

 

카운터 로직 재사용 - useCounter Hook

useCounter.ts

import { useState } from "react";

export function useCounter<T extends number>(initialValue: T) {
  const [count, setCount] = useState<T>(initialValue);

  const increment = () => setCount(prev => (prev + 1) as T);
  const decrement = () => setCount(prev => (prev - 1) as T);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

Custom01 컴포넌트

import React from 'react';
import { useCounter } from './useCounter';

function Custom01() {
  const { count, increment, decrement, reset } = useCounter<number>(0);

  return (
    <div>
      {count}
      <button onClick={increment}>증가</button>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>초기화</button>
    </div>
  )
}

useCounter 혹은 상태값을 증가, 감소, 초기화하는 기능을 제공한다. 이 훅을 사용하면 동일한 로직을 여러 컴포넌트에서 손쉽게 재사용할 수 있다.

 

input 상태를 관리하는 useInput 훅

useInput.ts

import { useState } from "react";

export function useInput(initialValue: string) {
  const [value, setValue] = useState(initialValue);

  const handleValueChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => setValue(e.target.value);

  const handleReset = () => setValue(initialValue);

  return {
    value,
    handleReset,
    bind: {
      value,
      onChange: handleValueChange
    }
  };
}

custom02 컴포넌트

useInput 훅은 value, onChange, 초기화 함수를 하나의 훅으로 묶어 관리한다. 구조 분해 할당을 활용하면 이름, 이메일 등 여러 input을 독립적으로 관리할 수 있다.

 

구조분해 할당 활용하기

const person = { nickname: 'bergerac', age: 29 };
const { nickname, age } = person;
const { nickname: nn } = person;

객체의 특정 속성을 추출하고, 필요에 따라 변수명을 변경할 수 있다.