Custom Hook

Custom Hook이란?

 

예를들어, input을 구현하고 useState로 각 input의 value를 관리하는 코드가 있다고 가정해보자.

이때, input의 개수가 증가할수록 useState와 이벤트핸들러도 같이 증가하고 코드의 불필요한 중복이 생겨나게 될 것이다.

이를 위해 리액트에서 제공하는 useState, useEffect 같은 내장 훅을 사용해서 사용자만의 훅을 만드는 것을 말한다.

 

custom hook의 예시- useInput

 

커스텀 훅을 사용할때는 use~~라고 명명하는 컨벤션을 따른다.

여기서는 input에 관한 커스텀훅을 만들 것이므로 useInput이라는 컴포넌트를 생성한다.

 

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

 

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

 

중복코드가 사라지고 전체적인 코드의 양 역시도 많이 줄어든 것을 볼 수 있다.

 

정리

 

• 커스텀훅이란, 리액트 훅을 이용해서 공통된 로직이나 기능을 별도로 분리한 훅을 말한다.
• 파일의 이름 앞에 반드시 use 라는 키워드가 들어가야 한다.