React의 사용자 정의 후크는 여러 구성 요소에서 로직을 추출하고 재사용할 수 있는 강력한 기능입니다. 이를 통해 복잡한 상태 저장 논리를 캡슐화하여 구성 요소를 더 깔끔하고 유지 관리하기 쉽게 만들 수 있습니다. 다음은 사용자 정의 후크를 만들고 사용하는 방법에 대한 간단한 개요와 예입니다.

사용자 정의 후크 만들기

사용자 정의 후크는 본질적으로 이름이 use로 시작하고 내부에서 다른 후크를 호출할 수 있는 JavaScript 함수입니다. 다음은 카운터를 관리하는 사용자 정의 후크의 간단한 예입니다.

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(c => c   1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);

    return { count, increment, decrement, reset };
}

export default useCounter;

사용자 정의 후크 사용

모든 기능 구성 요소에서 useCounter 후크를 사용할 수 있습니다.

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        

            
Count: {count}
            Increment
            Decrement
            Reset
        
    );
}

export default CounterComponent;

핵심 사항

1. 명명 규칙: 항상 React의 규칙을 따르도록 사용하여 사용자 정의 후크의 이름을 시작합니다.
2. 재사용성: 사용자 정의 후크를 여러 구성 요소에서 재사용하여 DRY(Don't Repeat Yourself) 코드를 승격할 수 있습니다.
3. 상태 관리: 상태를 관리하고, 부작용을 수행하고, 사용자 정의 후크 내에서 다른 후크를 활용할 수 있습니다.

고급 예: 데이터 가져오기

데이터를 가져오기 위한 고급 맞춤 후크는 다음과 같습니다.

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                if (!response.ok) throw new Error('Network response was not ok');
                const result = await response.json();
                setData(result);
            } catch (error) {
                setError(error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, [url]);

    return { data, loading, error };
}

export default useFetch;

용법

구성요소에서 useFetch 후크를 사용하여 데이터를 가져올 수 있습니다.

import React from 'react';
import useFetch from './useFetch';

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

    if (loading) return 
Loading...
;
    if (error) return 
Error: {error.message}
;

    return (
        

            
Data:
            
{JSON.stringify(data, null, 2)}
        
    );
}

export default DataFetchingComponent;

사용자 정의 후크는 깨끗하고 유지 관리가 가능한 방식으로 논리를 캡슐화하고 구성 요소 전체에 기능을 공유할 수 있는 좋은 방법입니다.