Custom Hook

자주 쓰일것 같은 기능의 경우 커스텀 훅으로 만들어 놓으면 코드를 작성할 필요 없이 훅을 불러와 쓰기만 하면 되서 편하다

어디에 커스텀훅을 사용하면 편할까 고민하다 자주 쓰이는 input기능을 커스텀 훅으로 만들어 보었다.

import { useState } from "react";

function useInput() {
  const [write, setWrite] = useState({
    id: 0,
    name: "",
    title: "",
    content: "",
  });

  const onChangeHandler = (e) => {
    const { name, value } = e.target;
    setWrite({ ...write, [name]: value });
  };
  return [write, onChangeHandler];
}

export default useInput;

useInputjs 라는 js파일을 만들어서 return의 배열속 첫번째는 value, 두번째는 핸들러를 반환하였다.

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

const [write, onChangeHandler] = useInput();

const onSubmitHandler = (e) => {
  e.preventDefault();
  write를 보내주는 함수...
};

return <input onChange={onChangeHandler} />

그리고 원하는 부분에는 이렇게 처리를 해주었다.