코드 리뷰 목록
TypeScript🤖 AI 리뷰 완료

React Custom Hook - useFetch

API 호출을 추상화한 커스텀 훅입니다. 로딩 상태, 에러 처리, 재시도 기능을 포함합니다.

L
lee_ts
2025-03-19
3

// 코드

TypeScript
35 lines
1import { useState, useEffect, useCallback } from 'react'
2
3interface FetchState<T> {
4  data: T | null
5  loading: boolean
6  error: Error | null
7}
8
9function useFetch<T>(url: string, options?: RequestInit) {
10  const [state, setState] = useState<FetchState<T>>({
11    data: null,
12    loading: true,
13    error: null,
14  })
15
16  const fetchData = useCallback(async () => {
17    setState(prev => ({ ...prev, loading: true, error: null }))
18    try {
19      const res = await fetch(url, options)
20      if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`)
21      const data: T = await res.json()
22      setState({ data, loading: false, error: null })
23    } catch (err) {
24      setState({ data: null, loading: false, error: err as Error })
25    }
26  }, [url])
27
28  useEffect(() => {
29    fetchData()
30  }, [fetchData])
31
32  return { ...state, refetch: fetchData }
33}
34
35export default useFetch
🤖
AI 코드 리뷰
2025-03-19
자동 분석

`options` 파라미터가 변경될 때 `fetchData`가 재실행되지 않습니다. `useCallback` 의존성 배열에 `options`를 추가하거나, `JSON.stringify(options)`를 사용하세요. 무한 루프를 주의해야 합니다.

// 커뮤니티 리뷰2

K
kim_react
2025-03-19
7

훌륭한 패턴입니다! AbortController를 추가하면 컴포넌트 언마운트 시 진행 중인 fetch 요청을 취소할 수 있어 메모리 누수를 방지할 수 있습니다.

L
lee_frontend
2025-03-20
4

SWR이나 React Query 같은 라이브러리를 고려해보셨나요? 캐싱, 재검증, 폴링 등 다양한 기능을 제공합니다.

// 리뷰 작성