Custom Hook

Custom Hook

코딩을 하다 보면 (당연히도) 반복적인 로직이 굉장히 많이 나오게 된다

예를 들면, 버튼을 눌렀을 때 특정 상태값이 바뀌게 하는 로직, input에 값을 입력하면 상태값이 같이 변하는 로직 등...

매 컴포넌트마다 useState, useEffect를 손수 달아주기보단 훅을 직접 만들어서 필요할 때마다 불러와 사용하면 몇십줄 재선언해야할 게 한두줄이면 끝난다

예시

Axios 코드

axios.get('링크')
    .then(res => {
        console.log(res);
        setState(res.data);
    })
    .catch(e => {
        console.log(e);
    });

어떠한 API에 GET 요청을 보내는 axios 코드가 있다

보통 API에 요청을 보내는 건 컴포넌트가 Mount될 때 이루어지므로, useEffect() 는 덤으로 같이 사용한다

생각해보면 대다수의 컴포넌트 내에서 API 요청 코드는 크게 다른 점 없이 비슷한 형태를 띄는데, 이걸 함수화하면 더 편리하게 쓸 수 있지 않을까?

모든 컴포넌트마다 저 코드를 한땀한땀 박아넣는 것도 귀찮고 말이다

Custom Hook: useAxiosGet.js

import { useState, useEffect } from 'react';

const useAxiosGet = (url) => {
    const [apiData, setApiData] = useState(null);
    useEffect(() => {
        axios.get(url)
            .then(res => {
                console.log(res);
                setState(res.data);
            })
            .catch(e => {
                console.log(e);
            });
    }, []);
    return apiData;
}

export default useAxiosGet;

• 데이터를 저장할 상태값인 apiData, setApiData를 useState를 이용하여 선언 및 초기화한다
• 화면이 렌더링될 때 동작할 것이므로 useEffect 훅 안에 로직을 넣어둔다
• 지정한 상태값을 반환한다

커스텀 훅은 보통 여러 컴포넌트에서 불러와 사용하므로 hooks 등의 폴더에 모아놓는다

사용하기

import useAxiosGet from '/src/hooks/useAxiosGet';

const testComponent = () => {
    const apiData = useAxiosGet('api-링크');

    return (
        <div>
            { apiData.id }
        </div>
    );
}

커스텀 훅을 사용하니 한 줄 만으로 데이터 받아오는 일이 완료되었다

이름이 커스텀 훅이라 뭔가 어려워보이고 useState나 useEffect같이 내부에서 복잡한 일들을 잔뜩 처리해야할 것 같지만 실상은 반복적인 코드를 함수화해서 여러 컴포넌트에서 갖다 쓸 수 있도록 처리한 것 뿐이다

정말 별거없어서 놀랐다.. 적을것도 많을줄

결론

반복적인 로직을 컴포넌트마다 선언하지 말고 커스텀 훅을 만들어 재사용성을 높이고 코드를 간결하게 만드는 것은 어떨까?

다만 리액트 공식 문서에서는 간단한 로직을 전부 훅으로 만들기보다는 비교적 복잡한 로직을 훅으로 만들어 간편하게 사용하기를 권장하고 있다

기업과제를 빨리 구현하는데만 치중하지 말고 커스텀 훅이나 useMemo, useContext 등 평소에 잘 안 써봤던 리액트 자체 기능도 적절히 손대 보는 게 좋을 듯하다

참고자료

21. 커스텀 Hooks 만들기

21. 커스텀 Hooks 만들기 · GitBook

자신만의 Hook 만들기 - React

자신만의 Hook 만들기 – React