React) 커스텀 훅(Custom Hook) 만들기

0. 커스텀 훅

- React 에서 기능을 재사용하기 위한 좋은 방법이다.

- 커스텀 훅을 만들면 여러 컴포넌트에서 동일한 로직을 사용할 수 있으며, 코드의 재사용성과 가독성을 높일 수 있다. 

- 커스텀 훅은 'use' 라는 접두사로 시작한다.

 

🔸Counter 예제 코드

import React, { useState } from 'react';

// 커스텀 훅
const useCounter = (initialCount) => {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return [count, increment, decrement];
};

// 컴포넌트
const Counter = () => {
  const [count, increment, decrement] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

위의 예제에서 useCounter라는 커스텀 훅을 만들었다. 이 훅은 초기 카운트 값을 받아 count 상태와 increment, decrement 함수를 반환한다. 그런 다음 Counter 컴포넌트에서 useCounter를 호출하여 상태와 함수를 사용합니다.

이렇게 하면 useCounter를 여러 컴포넌트에서 호출하여 동일한 카운터 로직을 재사용할 수 있다. 커스텀 훅을 사용하면 필요한 로직을 추상화하여 코드를 간결하고 재사용 가능하게 만들 수 있다.

 

🔸API 호출을 처리하는 커스텀 훅

import React, { useState, useEffect } from 'react';

// 커스텀 훅
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

// 컴포넌트
const DataFetcher = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

위의 코드에서 useFetch라는 커스텀 훅을 만들었다. 이 훅은 주어진 URL에서 데이터를 가져와 상태를 관리한다. 상태로는 data (데이터), loading (로딩 상태), error (에러)가 있다. useEffect 훅을 사용하여 컴포넌트가 마운트될 때와 url이 변경될 때마다 데이터를 가져온다.
DataFetcher 컴포넌트에서는 useFetch를 호출하여 데이터를 가져온다. loading이 true인 동안 "Loading..." 메시지를 표시하고, error가 발생한 경우 해당 에러를 표시한다. 그렇지 않은 경우 데이터를 보여준다.
이런 식으로 커스텀 훅을 사용하면 데이터 호출 및 로딩/에러 처리와 같은 일반적인 로직을 여러 컴포넌트에서 재사용할 수 있다.