React, useFetch 커스텀 훅

2024. 12. 9. 15:32웹 개발

useFetch.js

import { useState, useEffect } from 'react';

function 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("데이터 가져오기에 실패했습니다.");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

'웹 개발' 카테고리의 다른 글

React, State 사용하기  (0) 2024.12.11
React, propTypes 를 통한 prop 검증  (0) 2024.12.11
React, useWindowSize 커스텀 훅  (1) 2024.12.09
React, Use Effect 생명주기  (1) 2024.12.09
React, useState 더 깊이 알기  (0) 2024.12.09