커스텀 훅을 사용한 React 개발

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자, 중급 이상의 프론트엔드 개발자

핵심 요약

• 커스텀 훅(useCounter, useLocalStorage, useFetch)은 재사용 가능한 로직을 제공하여 코드의 유지보수성과 가독성 향상
• React의 내장 훅(예: useState, useEffect)을 기반으로 상태 관리 및 사이드 이펙트 처리 가능
• "use"로 시작하는 함수명은 React가 훅으로 인식하도록 하며, 중복 로직 제거에 효과적

섹션별 세부 요약

1. 커스텀 훅의 정의 및 목적

• 커스텀 훅은 여러 컴포넌트에서 공통적으로 사용되는 로직을 재사용 가능하게 만드는 함수
• 예: useCounter는 useState, useEffect를 사용해 상태 관리 로직을 추상화
• "use"로 시작하는 이름 규칙을 준수해야 React가 훅으로 인식

2. 커스텀 카운터 훅 구현 단계

• Step 1: useCounter 함수 정의 및 내보내기
• 예: function useCounter() { ... }
• Step 2: useState로 상태 관리 및 increment, decrement, reset 함수 정의
• 예: const [count, setCount] = useState(initialValue)
• Step 3: count 상태와 함수를 return하여 외부 컴포넌트에서 사용 가능
• 예: return { count, increment, decrement, reset }
• Step 4: 컴포넌트에서 useCounter 훅 사용
• 예: const { count, increment } = useCounter(5)

3. 실제 활용 예시: `useLocalStorage`

• localStorage 데이터를 자동으로 관리하는 훅
• useState로 저장된 값을 관리, useEffect로 변경 시 localStorage에 반영
• 예: function useLocalStorage(key, initialValue)
• 사용 예시: const [theme, setTheme] = useLocalStorage("theme", "light")

4. 실제 활용 예시: `useFetch`

• API 요청 로직을 추상화한 훅
• useEffect 내 fetch() 사용, 로딩, 데이터, 에러 상태 관리
• 예: function useFetch(url)
• 사용 예시: const { data, loading, error } = useFetch("https://api.example.com/users")

결론

• 커스텀 훅은 상태 관리, API 요청, localStorage 처리 등 반복적 로직을 재사용 가능하게 만드는 핵심 패턴
• "use"로 시작하는 이름과 내장 훅(useState, useEffect) 사용을 필수로 준수
• 단일 컴포넌트만 사용하는 경우 별도 파일 생성은 필요 없음
• 예제: useLocalStorage, useFetch는 실제 프로젝트에서 흔히 사용되는 실용적 예시