Custom Hooks (커스텀 훅)

what

리액트를 사용하면 많은 hook들을 사용하게 됩니다. 대표적으로 useState가 있습니다.
이와 같은 hook 이지만 custom hook은 내부 로직을 설정할 수 있다는 것이 특징입니다.
즉, 내가 원하는 기능을 하는 hook을 만들어서 사용하는 것 입니다.

특징적으로는 custom hook을 만들 때, 기존에 있던 hook들을 사용해서 내부 로직을 작성할 수 있다는 것이 특징입니다. 이를 통해 다양한 기능을 구현할 수 있습니다.

why

상태관리를 할 때는 useState를 사용합니다. 이처럼 코드 한줄 (훅 하나)만을 통해 내가 원하는 기능을 내가 원하는 컴포넌트에서 간단히 불러와서 사용할 수 있기 때문에 편리합니다. 편리하고 다양한 기능을 만들 수 있기 때문에 강력합니다.

how

useInput

기본 코드

import { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");

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

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

  return (
    <div className="App">
      <h1> useInput custom hooks</h1>
      <input value={inputValue} onChange={handleChange}></input>
      <button onClick={handleSubmit}> 확인 </button>
    </div>
  );
}

export default App;

custom hooks_ refactory

import useInput from "./useInput";

const displayMessage = (message) => {
  alert(message);
};

function App() {
  const [inputValue, handleChange, handleSubmit] = useInput("", displayMessage);

  return (
    <div className="App">
      <h1> useInput custom hooks</h1>
      <input value={inputValue} onChange={handleChange}></input>
      <button onClick={handleSubmit}> 확인 </button>
    </div>
  );
}

export default App;

위의 코드는 App.js 파일 입니다.
const [inputValue, handleChange, handleSubmit] = useInput("", displayMessage);
useInput 이라는 customhook을 사용하는 중 입니다. 해당 hook에서 inputValue, handleChange, handleSubmit 등을 빼와서 사용하는 방식입니다. 그리고 매개변수로 initialValue는 "", submitAction은 displayMessage을 받아서 사용합니다.

아래는 만들어서 사용한 custom hook의 코드 입니다. 파일명 useInput이라고 만들고 작성했습니다.

import { useState } from "react";

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

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

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

  return [inputValue, handleChange, handleSubmit];
};

export default useInput;