[TIL]커스텀 훅 만들기

커스텀 훅 사용 이전

import React, { useState } from "react";

export default function AddColorForm({ onNewColor = f => f }) {
  const [title, setTitle] = useState("");
  const [color, setColor] = useState("#000000");

  const submit = e => {
    e.preventDefault();
    onNewColor(title, color);
    setTitle("");
    setColor("");
  };

  return (
    <form onSubmit={submit}>
      <input
        value={title}
        onChange={event => setTitle(event.target.value)}
        type="text"
        placeholder="color title..."
        required
      />
      <input
        value={color}
        onChange={event => setColor(event.target.value)}
        type="color"
        required
      />
      <button>ADD</button>
    </form>
  );
}

• <form>에 <input>이 많아질 경우 value와 onChange가 반복된다.

     value={title}
     onChange={event => setTitle(event.target.value)}
  

커스텀 훅 사용 이후

import { useState } from "react";

export const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);
  return [
		// 상태에 있는 value, 상태의 value를 변경하는 onChange 함수 프로퍼티
    { value, onChange: e => setValue(e.target.value) },
    () => setValue(initialValue) // value 값을 초깃값으로 재설정할 때 사용할 함수
  ];
};

import React from "react";
import { useInput } from "./hooks";

export default function AddColorForm({ onNewColor = f => f }) {
  const [titleProps, resetTitle] = useInput("");
  const [colorProps, resetColor] = useInput("#000000");

  const submit = e => {
    e.preventDefault();
    onNewColor(titleProps.value, colorProps.value);
    resetTitle(); // value 값을 초깃값으로 재설정
    resetColor(); 
  };

  return (
    <form onSubmit={submit}>
      <input
        {...titleProps} // 프로퍼티를 스프레드해 추가
        type="text"
        placeholder="color title..."
        required
      />
      <input {...colorProps} type="color" required />
      <button>ADD</button>
    </form>
  );
}

• 반복되는 세부 사항을 커스텀 훅으로 묶을 수 있다.
  • useState 훅은 useInput 훅 안에 캡슐화된다.
• 커스텀 훅을 통해 구현 세부 사항에 신경을 쓰지 않으며 제어가 되는 폼 입력을 만들 수 있다.

출처

• 러닝 리액트(2판) - 6.5.3 커스텀 훅 만들기