🔧 커스텀 훅(Custom Hook) 완벽 이해하기

 

이번 글에서는 React의 커스텀 훅(Custom Hook)이 무엇인지 개념부터 활용 방법까지 상세히 다루고, 실무에서 자주 사용되는 커스텀 훅 예시와 활용 사례를 알아보겠습니다.

✅ 커스텀 훅(Custom Hook)이란?

커스텀 훅은 React의 내장된 훅을 사용하여 공통된 로직을 재사용할 수 있도록 만든 훅입니다. 커스텀 훅은 "use"로 시작하며, 코드 재사용성을 높이고 컴포넌트 로직을 간결하게 유지할 수 있게 합니다.

🚩 커스텀 훅 만드는 법과 활용법

기본적인 커스텀 훅 예시:

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        fetch(url)
            .then(res => res.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, [url]);

    return { data, loading };
}

export default useFetch;

컴포넌트에서 커스텀 훅 활용하기:

import useFetch from './useFetch';

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

    if (loading) return <div>로딩 중...</div>;

    return (
        <ul>
            {data.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    );
}

🚀 자주 사용되는 커스텀 훅 예시와 실무 활용 사례

• useLocalStorage: 로컬 스토리지 데이터를 관리할 때 사용합니다.
• useDebounce: 입력 필드의 검색어나 이벤트 처리를 지연하여 성능을 개선합니다.
• useToggle: boolean 상태를 쉽게 전환하는 로직을 관리합니다.

useLocalStorage 예제:

function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        const item = window.localStorage.getItem(key);
        return item ? JSON.parse(item) : initialValue;
    });

    const setValue = value => {
        setStoredValue(value);
        window.localStorage.setItem(key, JSON.stringify(value));
    };

    return [storedValue, setValue];
}

📌 실무에서의 활용 팁

• 공통 로직을 추상화하여 코드 중복을 방지하고 유지보수를 쉽게 만드세요.
• 기능별로 훅을 나누어 가독성과 관리성을 높이세요.
• 명확한 이름과 사용법을 갖추어 팀 내 협업을 원활하게 만드세요.

🎈 마무리

이번 글을 통해 커스텀 훅의 개념과 작성법, 실무에서의 다양한 활용 사례를 익히셨길 바랍니다. 직접 실습하며 자신만의 커스텀 훅을 만들어보세요!