Custom Hooks

Custom Hook이란?

-input 갯수만큼 늘어나는 useState, event handler들

// src/App.jsx

import React from "react";
import { useState } from "react";

const App = () => {
	// input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
  const [title, setTitle] = useState("");
  const onChangeTitleHandler = (e) => {
    setTitle(e.target.value);
  };

	// input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다.
  const [body, setBody] = useState("");
  const onChangeBodyHandler = (e) => {
    setBody(e.target.value);
  };

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

export default App;

위 코드는 input의 개수가 증가하면 useState와 이벤트핸들러도 같이 증가하고 그로 인해 코드의 중복이 생긴다.
만약 input이 십수개가 넘어가면 중복코드가 점점 많아질것이다.
리액트에서는 위 예시처럼 반복되는 로직이나 중복되는 코드를 자신만의 훅, 즉 커스텀 훅을 통해 관리할 수 있다.

• 첫 custom hook ➡ useInput
  위 코드를 바탕으로 첫번째 커스텀훅인 useInput을 만들어보자.
  이름은 마음대로해도 상관 없으나, 파일 이름 앞에 use 키워드를 붙여줘야한다.
  
  파일 구조는 위와 같이 만든다.

• 코드 구현

// src/hooks/useInput.js
import React, { useState } from "react";
  // value는 useState로 관리
const useInput = () => {
  const [value, setValue] = useState("");
  // 핸들러 로직도 구현
  const handler = (e) => {
    setValue(e.target.value);
  };
  // 이 훅은 []을 반환. 첫번째는 value, 두번째는 핸들러를 반환
  return [value, handler];
};

export default useInput;

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

const App = () => {
  const [title, onChangeTitle] = useInput();
  const [body, onChangeBody] = useInput();

  return (
    <div>
      <input 
        type="text"
        name="title"
        value={title}
        onChange={onChangeTitle}
      />
      <input 
        type="text"
        name="title"
        value={body}
        onChange={onChangeBody}
      />      
    </div>
  );
}

export default App;

중복코드가 사라지고 전체적인 코드의 양도 감소했다.