React - custom hook

❶ custome hook 이란?

React 커스텀 훅은 useState, useEffect, useReducer 및 useContext와 같은 React의 내장 hook을 사용하여 재사용 가능한 로직을 캡슐화하는 사용자 정의 함수입니다.
custom hook을 사용하면 여러 구성 요소에서 로직을 추출하고 공유할 수 있으므로 코드를 보다 모듈화하고 유지 관리할 수 있으며 테스트하기가 더 쉬워집니다.

---

❷ 사용하는 이유

1. 재사용 가능한 로직
custom hook를 사용하면 여러 구성 요소에서 공유 로직을 추출하고 재사용할 수 있습니다.

2. 관심사 분리
로직을 custom hook으로 분리하면 구성 요소의 UI와 해당 로직 간에 관심사를 명확하게 분리하여 더 깨끗하고 읽기 쉬운 코드를 만들 수 있습니다.

3. 더 쉬운 테스트
custom hook을 독립적으로 테스트할 수 있으므로 단위 테스트를 작성하고 로직의 정확성을 확인하기가 더 쉽습니다.

4. 개선된 구성
custom hook은 관련 기능을 구성하는 데 도움이 되므로 코드베이스를 더 쉽게 이해하고 유지 관리할 수 있습니다.

---

❸ 사용 방법

1. use 키워드(예: useCustomHook)로 시작하는 이름으로 새 함수를 만듭니다.
   이 규칙은 린터 및 기타 도구가 함수를 custom hook으로 인식하는 데 필수입니다.

2. 원하는 로직을 구현하는 데 필요에 따라 custom hook 내에서 useState, useEffect 또는 useContext와 같은 내장 hook을 사용할 수 있습니다.
   또한, 필요한 경우 다른 custom hook을 사용할 수도 있습니다.

3. 요소에 필요할 수 있는 custom hook에서 모든 값, 함수 또는 데이터 구조를 반환합니다.
   사용 사례 및 기본 설정에 따라 개체, 배열 또는 여러 값을 반환할 수 있습니다.

4. 내장 hook과 마찬가지로 구성 요소에서 custom hook을 가져와서 사용합니다.

API에서 데이터를 가져오는 간단한 예시 입니다.

// useFetchData.js
import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    }
    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetchData;

이 예시에서 useFetchData hook은 url을 인수로 사용하고 fetch를 사용하여 API에서 데이터를 가져옵니다.
그리고 데이터, 로드 및 오류 상태를 관리하기 위해 useState를 사용하였습니다.