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 |