[React] Custom Hook

Custom Hook

• 반복되는 로직을 쉽게 재사용하기 위한 사용자 정의 Hook
• use 로 시작하도록 명명
• React 내장 Hook (useState useEffect useContext등)을 조합하여 생성

장점

1. 재사용성
2. 캡슐화
   • 복잡한 로직 내부에 숨기기
   • 간단한 인터페이스를 외부에 제공
   • 컴포넌트의 복잡성 줄이기
3. 분리 및 조합
   • 서로 다른 기능을 하는 여러 Hook 조합
   • 필요에 따라 로직을 분리

사용하지 않는다면

import React, { useState, useEffect } from 'react';

function Profile() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const url = 'https://api.example.com/data';

    useEffect(() => {
        async function fetchData() {
            try {
                setLoading(true);  // 로딩 상태 시작
                const response = await fetch(url);
                const result = await response.json();
                setData(result);   // 데이터 설정
            } catch (error) {
                setError(error);  // 오류 처리
            } finally {
                setLoading(false); // 로딩 상태 종료
            }
        }

        fetchData();
    }, [url]);  // url이 변경될 때마다 이펙트 실행

    if (loading) return <div>Loading...</div>;  // 로딩 중 표시
    if (error) return <div>Error: {error.message}</div>;  // 오류 표시
    return <div>{JSON.stringify(data)}</div>;  // 데이터 표시
}

export default Profile;

• 코드 중복 : 데이터 패칭하는 로직이 필요할 때마다 이와 같은 코드 반복 -> 유지 관리 어려움
• 컴포넌트 복잡성 : 로직이 컴포넌트에 내장 -> 컴포넌트의 주된 기능과 데이터 페칭 로직이 혼합

사용 예제

function useFetch(url) {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState(null);
	
	useEffect(() => {
		async function fetchData() {
			try {
				const response = await fetch(url);
				const result = await response.json();
				setData(result);
			} catch (error) {
				setError(error);
			} finally {
				setLoading(false);
			}
		}
		fetchData();
	}, [url]);
	
	return { data, loading, error };

const { data, loading, error } = useFetch('https://api.example.com/data');

단점 (주의점)

• 과도한 추상화
  - 복잡성 증가 : 하나의 훅이 너무 많은 기능을 수행하거나, 다른 훅들과 상호작용하는 경우 유지관리 어려움
  - 디버깅 어려움 : 오류를 추적이 복잡해짐
• 의존성 관리
  - 사이드 이펙트 관리 : useEffect 와 같은 훅 사용시 예상치 못한 버그 더 자주 발생
• 재사용성의 한계
  - 특정 컴포넌트나 상황에 매우 특화되어 개발 -> 다른 컴포넌트나 상황에서 재사용하기 어려울 수도 있음
  - 너무 일반화하여 만들 경우, 특정 기능을 위한 필수적인 제어 불가능할 수도
• 테스팅의 복잡성
  - 커스텀 훅이 내부적으로 다른 훅을 사용하는 경우, 독립적인 테스트 어려움
  

위와 같은 부분을 염두하고 사용할 것 !