Custom Hook을 이용한 데이터 Fetching

06 Nov 2023

customhook

React에서 데이터를 가져오는 작업은 많은 컴포넌트에서 반복적으로 발생합니다. 이런 반복적인 작업을 효율적으로 처리하기 위해 Custom Hook을 사용할 수 있습니다. Custom Hook은 함수 컴포넌트 내에서 상태와 라이프사이클을 관리하는 로직을 추상화한 함수입니다.

이번 포스트에서는 Custom Hook을 사용하여 데이터 Fetching을 처리하는 방법에 대해 알아보겠습니다.

Custom Hook 작성하기

우선, Custom Hook을 작성하기 위해 컴포넌트에서 사용할 상태와 데이터 Fetching 로직을 구현할 함수를 작성해야 합니다.

import { useState, useEffect } from 'react';

const useDataFetching = (url) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [data, setData] = useState(null);

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

    fetchData();
  }, [url]);

  return { loading, data, error };
};

export default useDataFetching;

위의 코드는 useDataFetching이라는 Custom Hook을 작성한 예시입니다. 이 Custom Hook은 API로부터 데이터를 가져오는 로직을 처리합니다.

Custom Hook 사용하기

Custom Hook을 사용하기 위해 컴포넌트에서 useDataFetching을 import하고, 필요한 변수들을 추출하여 사용하면 됩니다.

import useDataFetching from './useDataFetching';

const App = () => {
  const { loading, data, error } = useDataFetching('https://api.example.com/data');

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

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

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  );
};

export default App;

위의 코드는 App 컴포넌트에서 useDataFetching을 사용하여 데이터를 가져오고, 상태에 따라 적절한 UI를 렌더링하는 예시입니다.

결론

Custom Hook을 사용하면 데이터 Fetching과 같은 반복적인 로직을 컴포넌트로부터 분리하여 재사용성을 높일 수 있습니다. 이를 통해 코드의 가독성과 유지보수성을 개선할 수 있습니다.

더 자세한 내용은 공식 React 문서를 참조하시기 바랍니다.