Custom hook 만들기

Custom hook 이란?

반복되는 로직을 재활용 하는 방법 중 하나

 -> 커스텀 훅은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위한 함수 이다.

--> 중복되는 코드 하나로 합쳐서 사용할 수 있음 

 

Custom hook 사용 시 주의할 점

1. 함수명이 use로 시작해야 한다.

2. 최상위에서만 호출할 수 있다.

3. 리액트 함수 내에서만 호출할 수 있다. 

4. 꼭 return 값을 주자.

 

 

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;

 

앞으로 기능 구현 하면서 중복되는 로직이 있으면 커스텀훅으로  빼보는 습관을 가져야 겠다.