[React] 커스텀 Hook이란?

1. 커스텀 Hook이란?

개발자가 스스로 커스텀 한 Hook을 말한다.

❓왜 커스텀 Hook을 제작하여 사용할까
1️⃣ 코드의 중복을 줄여 코드 가독성이 높아진다.
2️⃣ 재사용성을 높인다.
3️⃣ 변경사항이 있을 때 커스텀 Hook만 수정하면 되기 때문에 효율적으로 관리할 수 있다.

---

2. 코드 예시

커스텀 Hook을 사용할 때는 항상 use로 시작해야 한다.
아래 코드를 확인하여 useFetch()라는 이름의 커스텀 Hook을 확인해보자.

import { axios } from ‘axios’;
import { useState, useEffect } from ‘react’;

const useFetch = (initialUrl: string) => {
  const [url, setUrl] = useState(initialUrl);
  const [value, setValue] = useState(‘’);
  
  useEffect(() => {
    fetchData();
  }, [url]);
  
  const fetchData = () => {
    axios.get(url).then(({ data }) => setValue(data));
  };
  
  return [value];
};

export default useFetch;

위 코드 로직은 다음과 같다.
1️⃣ initialUrl을 받아와 url에 저장한다.
2️⃣ useEffect()가 실행된다.
3️⃣ fetchData()가 실행되고 url을 통해 받은 데이터를 value에 저장한다. (데이터가 있을 때만, 없을 땐 에러를 try catch로 받는게 좋다.)
📌 커스텀 Hook은 JSX가 아닌 배열이나 객체로 리턴한다.

useFetch()라는 커스텀 Hook을 만들어 보았고, 코드에 적용해보자.

import { useFetch } from ‘hooks’;

function App() {
  const [value] = useFetch(‘/api/2’);
  return <p>{value}</p>;
}

export default App;

useFetch()에 url을 작성하면 데이터를 받아와 값이 value에 저장되고, JSX 안에서 사용이 가능하다.
코드를 보면 커스텀 Hook을 사용법은 useState()와 거의 유사한 것을 알 수 있다.