리액트 커스텀 훅 사용해보기

• 간단하게 리액트 커스텀 훅을 사용해보기로 하였다.
• 커스텀 훅은 내가 사용해보고 느끼기에, 커스텀 훅이란 기존의 훅이 사용된 함수를 의미하고, 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를 통해서 사용자가 만든 알림 모달을 띄울 수 있다.

• 함수 자체를 반환하기에, 함수를 전달받아 사용할 수 있다.

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