간단한 React 커스텀 훅(Custom Hook) 사용법

간단하게 리액트 커스텀 훅을 사용해보기로 하였다.

커스텀 훅은 내가 사용해보고 느끼기에, 커스텀 훅이란 기존의 훅이 사용된 함수를 의미하고, use로 시작하는 이름으로 네이밍한 것이 커스텀 훅인 것 같았다.
🍓 커스텀 훅을 만들어 사용함으로써, 반복되는 코드의 함수가 여러 번 재사용될 수 있다.

그리고 커스텀 훅을 사용하면서 알게된 훅의 사용법으로는, 훅은 조건부로 사용될 수 없고, 렌더링 될 때 조건에 상관없이 실행이 되어야 한다는 점이 있다.

다음으로 내가 만들어 사용해봤던 커스텀 훅의 몇가지 예시를 남긴다.

useState를 이용한 input의 데이터를 관리하는 커스텀 훅

import { useState } from "react";

export const useCustomHook = () => {
	    const [inputData, setInputData] = useState("");
		
        const handleInput = (e) => {
        	setInputData(e.target.value);
        }
        
        return [inputData, handleInput];
}

• input 태그에 onChange 이벤트 메서드에 연결하여 사용될 수 있는 handleInput을 반환하는 훅인다.
• 반복되는 input이 있을때, 코드를 간략화하기 위해서 사용될 수 있다.

useEffect를 사용한 훅

import { useEffect } from "react";

export const useCustomHook = () => {
	useEffect(() => {
    	alert("렌더링!");
    }, []);
}

• useEffect를 사용하여 페이지가 처음 렌더링되었을 때, alert를 띄우는 커스텀 훅이다.
• 이 커스텀 훅을 통하여, 서로 다른 페이지에 동일하게 최초 렌더링 시 같은 함수를 실행할 수 있다.
• 커스텀 훅이 반환하는 값은 없을 수도 있다.

useDispatch를 사용한 함수를 반환하는 커스텀 훅

import { useDispatch } from "react-redux";
import axios from "axios";
import { popUpNotification } from "../redux/action";

export const useCustomHook = () => {

   const dispatch = useDispatch();

   const getData = async (url) => {
         try {
            const data = await axios.get(url);
         } catch {
            dispatch(popUpNotification("데이터를 가져오는 데 실패!"));
         }
      }

   return getData; // 함수를 반환한다.
}

• 위의 커스텀 훅은 데이터를 가져오고, 실패시 dispatch를 통해서 사용자가 만든 알림 모달을 띄울 수 있다.
• 함수 자체를 반환하기에, 함수를 전달받아 사용할 수 있다.

🍔 이 외에도, 여러 훅을 조합하여 다양한 기능을 하는 커스텀 훅을 자유롭게 만들어 사용할 수 있다.