밑의 코드는 사용성이 떨어진다. handleEmail과 handlePwd와 같은 기능(input value를 받아와 state의 값을 변경하는)을 하는 작업을 앞으로도 자주 쓸 수 있기 때문이다.

import React, { useCallback, useRef, useState } from "react";

function Field() {

  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");

  function handleEmail(event) {
    setEmail(event.target.value);
    console.log(email)
  }

  function handlePwd(event) {
    setPwd(event.target.value);
    console.log(pwd)
  }

  return (
    <div>
      <input id="email" value={email} onChange={handleEmail} />
      <input id="password" value={pwd} onChange={handlePwd} />
    </div>
  );
}

export default Field

따라서 이 기능을 온전히 맡아서 쓸 수 있는 커스텀 훅을 제작한다.

useInput.js

리턴 값으로 state와 set manipulator를 반환하는 것을 알 수 있다.

import {useState} from "react";

function useInput(initVal) {
  const [value, setValue] = useState(initVal);

  function handleChange(event) {
    setValue(event.target.value);
  }

  return [value, handleChange];
}

export default useInput;

상위 컴포넌트에서 사용

리턴값은 고스란히 우리가 새로 지정해준 state와 함수에 저장이 된다.

import React from "react";
import useInput from "./useInput";

function Field() {

  const [email, setEmail] = useInput("");
  const [pwd, setPwd] = useInput("");

  return (
    <div>
      <input id="email" value={email} onChange={setEmail} />
      <input id="password" value={pwd} onChange={setPwd} />
    </div>
  );
}

export default Field

Custom Hook을 남발하지 말자

핀다에서 쓰는 React Custom Hooks