React | Custom Hooks (커스텀 훅)

🔎 Custom Hooks
반복되는 로직이나 중복되는 코드를 별도로 분리해서 관리하는 것

사용 이유

// App.js
const App = () => {
  const [title, setTitle] = useState("");
  const onChangeTitleHandler = (e) => {
    setTitle(e.target.value);
  };

  const [body, setBody] = useState("");
  const onChangeBodyHandler = (e) => {
    setBody(e.target.value);
  };

로직이 같은 코드가 많을 경우, 같은 로직으로 커스텀 훅을 만들어 사용한다

사용 방법

// src/hooks/useInput.js

import React, { useState } from "react";

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

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

	// 1. 이 훅은 첫번째는 value, 두번째는 핸들러를 반환한다
  return [value, handler];
};

export default useInput;

useInput.js 파일을 생성하고, input 태그에 입력된 value를 state로 관리하는 useInput을 커스텀 훅으로 만들어준다
파일명은 반드시 use로 시작해야 함

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

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

사용할 컴포넌트에 useState 대신, useInput을 import하고, useInput.js에서 반환한 value와 함수를 변수(상수)로 선언해서 사용해준다