커스텀훅 이란?

• 함수형 컴포넌트에서 로직을 쉽게 재사용하기 위해 만드는 hook이다.
• 커스텀 훅은 로직을 재사용 할 수 있다.
• 커스텀 훅의 이름은 리액트 내장 훅처럼 use로 시작하는 것이 좋다.

1. 훅 쓰기 전 로직

// Login.jsx
import React, { useState, useCallback } from "react";

// state
const [text, setText] = useState({
  email: "",
  password: ""
});

// func
const onChange = useCallback(
  e => {
    const { value, name } = e.target;
    setText({ ...text, [name]: value });
  },
  [text]
);

return (
  <>
    <input id="email" value={text.email} onChange={onChange} />
    <input id="password" value={text.password} onChange={onChange} />
  </>
);

2. 커스텀 훅

• 중복 되는 로직을 넣는다.
• 파일 이름은 use...로 만드는 것이 컨벤션이다.

// useInput
import { useState, useCallback } from "react";

export default (initalValue = null) => {
  // state 정의
  const [data, setData] = useState(initalValue);

  // 함수 정의
  const handler = useCallback(
    e => {
      const { value, name } = e.target;
      setData({
        ...data,
        [name]: value
      });
    },
    [data]
  );
  return [data, handler];
};

3. 훅을 반영한 로직

// Login.jsx
import React from "react";
import useInput from "useInput";

// state
const [text, setText] = useInput({
  email: "",
  password: ""
});

return (
  <>
    <input id="email" value={text.email} onChange={setText} />
    <input id="password" value={text.password} onChange={setText} />
  </>
);

• useInput훅 안에 useState, useCallback에 있는 함수를 미리 정의 했기 때문에, 컴포넌트에서는 훅을 사용하기만 하면 된다.