Custom Hook

개념 설명

여러 컴포넌트에서 공통으로 사용하는 상태 로직을 재사용 가능한 함수로 추출한 사용자 정의 Hook.

핵심 포인트

• 함수명이 'use'로 시작해야 함 (Hook 규칙 적용)
• 다른 Hook들을 조합하여 복잡한 로직을 캡슐화
• 상태와 로직을 공유하되, 각 컴포넌트는 독립적인 상태 유지
• 컴포넌트 로직을 단순화하고 테스트 가능성 향상
• 관심사 분리로 코드 가독성 및 유지보수성 개선

예시 코드

// API 호출을 위한 Custom Hook
function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);