React - Custom Hooks

Custom Hooks

input을 받아서 state를 변경시키는 작업이 많아질 가능성도 있다.
그럴 때마다 useState()로 선언해준다면 불필요한 코드가 무한정 생길 것이다. 그것을 방지하기 위해 있는 것이 Custom Hooks이다. 리액트에서 제공하는 useState나 useEffect와 같은 내장 훅을 사용해서 각자가 원하는 훅을 만드는 것이다.

사용법

보통은 'src' 폴더에 'hooks'라는 폴더를 생성해서 커스텀 훅들을 보관하는 식으로 작업을 한다.

// 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;

이렇게 커스텀 훅을 정의한다. 커스텀 훅의 이름은 어떤 것이든 상관없지만, 'use'라는 키워드가 반드시 이름앞에 와야 한다. 이 경우엔 input값에 대한 훅이라고 하여 useInput이라고 이름 지은 것.

// 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="title"
        value={body}
        onChange={onChangeBodyHandler}
      />
    </div>
  );
};

export default App;

이렇게 호출해서 사용한다.