custom hook이란 무엇이며 어떻게 작성하나요?

Question

Accepted Answer

**custom hook**은 이름이 `use`로 시작하고 다른 hook을 호출하여 **상태 로직을 패키징하고 재사용**하는 함수입니다 — 컴포넌트 트리를 변경하지 않으면서요(HOC나 render props와 달리). ```jsx // "fetch + loading + error" 로직을 한 번 추출하여 어디서나 재사용 function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // 사용 — 컴포넌트는 선언적으로 유지됨: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## 중요한 속성 - **Rules of Hooks**를 따릅니다(최상위에서 호출, 컴포넌트/hook에서만 호출). - **state는 호출마다 격리됩니다.** `useFetch`를 사용하는 두 컴포넌트는 각각 독립적인 state를 가집니다 — hook을 공유한다고 데이터가 공유되는 것은 *아닙니다*. - 관례: `useX`로 이름 짓고 state + 함수를 반환합니다(보통 배열이나 객체). ## 왜 중요한가 custom hook은 현대 React에서 로직(데이터 페칭, 폼, 구독, 미디어 쿼리)을 공유하는 관용적인 방법이며, 컴포넌트를 작게 유지하고 로직을 독립적으로 테스트 가능하게 만듭니다.