자신만의 Hook 만들기

사용자 정의 Hook 추출하기

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다!

사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수입니다.
사용자 Hook은 다른 Hook을 호출할 수 있습니다.
예를 들자면, 아래의 useFetch가 우리의 첫 번째 사용자 정의 Hook입니다.

hooks/useFetch.js

import { useState, useEffect } from "react";

function useFetch(url) {
	const [data, setData] = useState([]);

	useEffect(() => {
		fetch(url)
			.then(res => {
				return res.json();
			})
			.then(data => {
				setData(data);
			})
	}, [url]);

	return data;
}

export default useFetch;

React 컴포넌트와는 다르게 사용자 정의 Hook은 특정한 시그니처가 필요 없습니다.
무엇을 인수로 받아야 하며 필요하다면 무엇을 반환해야 하는 지를 사용자가 결정할 수 있습니다. 다시 말하지만, 보통의 함수와 마찬가지입니다.
이름은 반드시 use로 시작해야 하는데 그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문입니다.

참고 :
https://ko.reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook