[React 완벽 가이드] Section 16 : Custom Hook

본 포스트는 Udemy 리액트 완벽가이드 2024 를 듣고 정리한 내용입니다.

목차 🌳
1️⃣ [복습] Hook 만드는 규칙
2️⃣ Custom Hook 만드는 이유
3️⃣ Custom Hook 만드는 방법 + 사용해보기

📁 [복습] Hook 만드는 규칙

1️⃣ 리액트 Component function 안이나, 혹은 다른 hook 안에서 사용 가능!!
2️⃣ Component function 최상단에서 사용해야 함
-> if 조건문 안에 넣는등 중첩 절대 안됨 ❌

여기에서 중요한 포인트는 바로 1번인데,
이전엔 Component function 안에서 작성해야 한다고 배웠지만, 사실은 다른 Hook function 안에서도 부를 수 있다!!

아무튼 우린 custom hook 을 만들어서 일정 기능을 수행해내는 친구들을 함수로 만들어, 재사용할 것이다!!
(이제너해 플젝때 커스텀 훅 하나도 없었는데.. 무지의 폐해)

📁 Custom Hook 이 뭔가

React에서 상태 관리와 로직을 재사용하도록 함!
React Hook과 동일하게, use로 시작하는 이름을 사용하며, 내부에서 Hook을 사용함

📁 Custom Hook 만드는 방법 + 사용해보기

작성방법 🧳
1️⃣ Custom Hook의 이름은 무조건 use~으로 시작!
-> react hook 을 사용하기 위해서는, hook의 한 종류라고 알려줘야함
2️⃣ Custom Hook 내부에서 useState, useEffect, useContext 등 기존 React Hook을 사용할 수 있으며, API 호출과 같은 로직을 수행 가능
-> 최대한 많은 컴포넌트에서 재사용될 수 있도록 설계
3️⃣ 리턴 값에, 반환할 상태나 상태 변경 함수 넣어주기

useFetch 예시

import { useEffect, useState } from 'react';

export function useFetch(fetchFn, initalValue) {
  const [fetchedData, setFetchedData] = useState(initalValue);
  const [isFetching, setIsFetching] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    async function fetchData() {
      setIsFetching(true);
      try {
        const places = await fetchFn();
        setFetchedData(places);
      } catch (error) {
        setError({ message: error.message || 'Failed to fetch places.' });
      }

      setIsFetching(false);
    }

    fetchData();
  }, []);
  return {
    fetchedData,
    setFetchedData,
    isFetching,
    error,
  };
}