📝 custom hooks이 뭘까?

---

반복되는 기능을 함수로 묶어서 사용하듯이, 리액트에서도 반복되거나 비슷한 형식의 훅을 만들어서 재활용 할 수 있다고 한다.

input 기능(커스텀훅 사용❌)

• src/components/input.jsx

import React, { useState } from "react";

const Input = () => {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    alert(inputValue);
    setInputValue("");
  };

  return (
    <>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit" onClick={handleSubmit}>버튼</button>
      </>
  );
};

export default Input;

input 기능(커스텀훅 사용⭕️)

• src/components/input.jsx

import useInput from "../hooks/useInput";

function displayMessage(message) {
  alert(message);
}

const Input = () => {
  const [inputValue, handleChange, handleSubmit] = useInput("", displayMessage);

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit" onClick={handleSubmit}>확인</button>
    </div>
  );
};

export default Input;

• src/hooks/useInput.jsx

import React, { useState } from "react";

const useInput = (initialValue, submitAction) => {
  const [inputValue, setInputValue] = useState(initialValue);

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  // 버튼 클릭 시, handleSubmit 함수가 호출이 된다.
  // 그러면, submitAction 콜백함수가 호출이 된다.
  // submitAction 함수는 inputValue를 매개변수로 받는다.
  // useInput()이 호출되는 곳의 두번째 인자로 submitAction 콜백함수가 전달이 되면서,
  // 두번째 인자의 위치에 있는 displayMessage라는 함수가 호출이 되어 블럭안의 내용을 실행한다.
  const handleSubmit = () => {
    setInputValue("");
    submitAction(inputValue);
  };

  return [inputValue, handleChange, handleSubmit];
};

export default useInput;

📚 참고

---

• React Hooks에 취한다 - Custom Hooks 커스텀 훅 | 리액트 훅스 시리즈