[FE / REACT] 커스텀 훅 (Custom Hook)

커스텀 훅 (Custom Hook)

 

이름이 use로 시작하는 자바 스크립트 함수로 서로 다른 두 개이상의 자바스크립트 함수에서 같은 로직을 공유할 때 해당 로직을 재사용 하기 위해 작성한다

커스텀 훅을 사용하면 코드의 중복을 줄이고 컴포넌트의 재사용성과 유지보수성을 높일 수 있다.

 

https://ko.legacy.reactjs.org/docs/hooks-custom.html

자신만의 Hook 만들기 – React

React 공식 홈페이지에서도 설명하는 커스텀훅

 

프로젝트를 진행하면서 코드 Rectoring을 진행하면서

API호출 코드를 비지니스 로직을 분리하기 위해

커스텀 훅으로 따로 빼주었다.

또한, 처음 페이지에 진입할 때 최상위로 스크롤 해주는 훅도 따로 빼줌으로써 불필요한 코드 중복을 줄이고

재사용성을 높일 수 있었다.

 

import accommodationAPI from 'apis/accommodationAPI';
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { PlaceDetailInfo } from 'types/Place';

export default function useGetAccommodationDetailInfo(accommodationdId : string | undefined) {

    const [isLoading, setIsLoading] = useState(true);
    const [accommodationInfo, setAccommodationInfo] = useState<PlaceDetailInfo>();

    const navigate = useNavigate();


    useEffect(() => {
        const getAccommodationDetail = async () => {
            if (accommodationdId !== undefined) {
                setIsLoading(true);
                try {
                    const id = +accommodationdId;
                    const response = await accommodationAPI.getPlaceDetail(id);
                    setAccommodationInfo(response.data.data);
                } catch (error) {
                    console.error('Failed to load accommodation details:', error);
                    navigate('/404', { replace: true });
    
                    }
                    
                setIsLoading(false);
            }
        };
        
        getAccommodationDetail();
    },[accommodationdId]);

  return [isLoading, accommodationInfo];
}

 

다음과 같이 커스텀 훅을 생성해주고

 

	const [isLoading, accommodationInfo] = useGetAccommodationDetailInfo(accommodationdId) as [boolean, PlaceDetailInfo];

 

이런식으로 불러주면 된다!

 

생각보다 만드는 방법이 간단하고

비지니스 로직을 분리해 코드의 목적을 보다 분명하게 처리할 수 있었다