TIL 42. React - Custom Hook

코딩할 때 자주 사용하는 input을 custom hook으로 만들 수 있다.
아래는 custom hook을 적용한 코드다.
useInput이라는 custom hook을 만들어서 사용했다.

// src/App.jsx

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

const App = () => {
  const [title, onChangeTitleHandler] = useInput();
  const [body, onChangeBodyHandler] = useInput();

  return (
    <div>
      <input
        type="text"
        name="title"
        value={title}
        onChange={onChangeTitleHandler}
      />

      <input
        type="text"
        name="body"
        value={body}
        onChange={onChangeBodyHandler}
      />
    </div>
  );
};

export default App;

아래는 custom hook 코드 부분이다.

// src/hooks/useInput.js

import {useState} from "react";

const useInput = () => {
  // 2. value는 useState로 관리하고,
  const [value, setValue] = useState("");

  // 3. 핸들러(함수) 로직도 구현한다.
  const handler = (e) => {
    setValue(e.target.value);
  };

  // 1. 이 훅은 const [title, onChangeTitleHandler] = useInput(); 부분의 
  // [ ]를 반환하는데, 첫번째는 value, 두번째는 handler를 반환한다.
  // ex) title = value, onChangeTitleHandler = handler
  return [value, handler];
};

export default useInput;

[value, handler]를 반환하기 때문에 useInput은 [value, handler]가 되고,
구조분해할당으로 [value, handler] = useInput이 된다.
구조분해할당한 useInput을 사용자가 이용하는데,
value는 useInput.js 파일의 useInput 속 value가 되고,
handler는 useInput.js 파일의 useInput 속 handler함수가 된다.