React Custom Hook

Custom Hook은 API 호출과 직접 연관이 있는 건 아니지만, API 호출을 효과적으로 하는 방법들을 이해하기 위해서는 선행으로 Custom Hook이 어떤건지 이해하고 있어야 한다.

Custom Hook

Custom Hook은 여러 개의 컴포넌트에서 공통적으로 해야하는 작업이 있을 경우 사용한다.
ex. API 호출, 로딩 처리, 에러 핸들링 등

Custom Hook은 컴포넌트 로직을 함수로 뽑아내어 재사용하는 것이다.
이름이 'use'로 시작하는 자바스크립트 함수이며 다른 Hook을 호출할 수 있다.

서로 다른 두 개의 컴포넌트에서 같은 Hook을 사용한다고 해도 state를 공유하진 않는다.
재사용하는 메커니즘일 뿐 그 안의 state와 effect는 완전히 독립적이다.

++ 기본적으로 Custom Hook은 useEffect()내에서 사용 할 수 없음

useFetch()

데이터를 불러와 사용하는 것은 페이지를 만드는데 굉장히 흔한 일이다.
useFetch()는 이때 범용적으로 사용되는 Custom Hook이다.

이 글에서 다루었던 코드에 useFetch()를 적용시켜보겠다.

/* Custom Hook */
import { useEffect, useState } from 'react';
import axios from 'axios';

function useFetch(url) {
	const [docs, setDocs] = useState([]);

	useEffect(() => {
		async function fetchData() {
			const res = await axios.get(url);
			const result = res.data;
			return result;
		}
		fetchData().then(res => { setDocs(res) });
	}, [url]);

	return docs;
}
export default useFetch;

/* 사용자 정의 컴포넌트 */
import React, { useEffect, useState } from 'react';

 export default function ReactPage() {
  	// useFetch 사용
  	const docs = useFetch('https://jsonplaceholder.typicode.com/posts');

	return (
		<div>ReactPage</div>
	);
}