[240519 WIL] Custom Hook

한주가 또 지나갔습니다. 이번 주는 리액트 입문 첫번째 개인과제 주차로
목표는 todo list 만들기 였습니다. react의 주요 기본 기능이 많이 사용되는 프로젝트 인만큼
잘 공부해 두면 추후의 프로젝트에도 많은 도음이 될 것이라 생각되었습니다.

 

이번 주에 학습한 내들용들을 복습하다가 custom hook 의 사용이유와 사용하는 상황에 대해
한번 정리하고 넘어가는 것이 좋겠다고 생각하여 wil 을 작성해 봅니다

커스텀 훅을 사용하는 이유

1. 코드 재사용성:
   • 동일한 로직을 여러 컴포넌트에서 사용할 때, 커스텀 훅을 만들어서 로직을 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고 유지보수성을 높일 수 있습니다.
2. 로직 분리:
   • UI 로직과 비즈니스 로직을 분리하여 컴포넌트를 더욱 간결하고 이해하기 쉽게 만듭니다. 컴포넌트는 UI에 집중하고, 커스텀 훅은 상태 관리나 비즈니스 로직을 담당합니다.
3. 가독성 향상:
   • 복잡한 로직을 커스텀 훅으로 분리하여 컴포넌트 내부의 코드가 간결해지고 가독성이 향상됩니다. 훅 이름만으로도 어떤 기능을 수행하는지 쉽게 알 수 있습니다.
4. 추상화:
   • 커스텀 훅을 사용하면 특정 기능을 추상화하여 구현 세부 사항을 숨길 수 있습니다. 이는 코드의 모듈화를 돕고, 다른 개발자들이 훅의 내부 구현을 신경 쓰지 않고 사용할 수 있게 합니다.

커스텀 훅을 사용하는 주요 상황

1. 데이터 페칭:
   • API 호출과 같은 데이터 페칭 로직을 커스텀 훅으로 분리하여 사용합니다. 예를 들어, 데이터를 가져오는 useFetch 훅을 만들어 사용할 수 있습니다.

   import { useState, useEffect } from 'react';
   
   const useFetch = (url) => {
     const [data, setData] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
   
     useEffect(() => {
       const fetchData = async () => {
         try {
           const response = await fetch(url);
           const result = await response.json();
           setData(result);
         } catch (error) {
           setError(error);
         } finally {
           setLoading(false);
         }
       };
   
       fetchData();
     }, [url]);
   
     return { data, loading, error };
   };
   
   export default useFetch;

2. 폼 핸들링:
   • 입력 폼의 상태 관리와 유효성 검사 로직을 커스텀 훅으로 분리합니다. 예를 들어, useForm 훅을 만들어 사용할 수 있습니다.

   import { useState } from 'react';
   
   const useForm = (initialValues) => {
     const [values, setValues] = useState(initialValues);
   
     const handleChange = (event) => {
       const { name, value } = event.target;
       setValues({
         ...values,
         [name]: value,
       });
     };
   
     return { values, handleChange };
   };
   
   export default useForm;

3. 공통 상태 관리:
   • 여러 컴포넌트에서 공유하는 상태 관리 로직을 커스텀 훅으로 분리합니다. 예를 들어, 모달의 열림/닫힘 상태를 관리하는 useModal 훅을 만들어 사용할 수 있습니다.

   import { useState } from 'react';
   
   const useModal = () => {
     const [isOpen, setIsOpen] = useState(false);
   
     const openModal = () => setIsOpen(true);
     const closeModal = () => setIsOpen(false);
   
     return { isOpen, openModal, closeModal };
   };
   
   export default useModal;

4. 애니메이션 및 이벤트 핸들링:
   • 스크롤, 윈도우 크기 변경 등의 이벤트 핸들링 로직을 커스텀 훅으로 분리합니다. 예를 들어, 윈도우 크기를 추적하는 useWindowSize 훅을 만들어 사용할 수 있습니다.

   import { useState, useEffect } from 'react';
   
   const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState({
       width: window.innerWidth,
       height: window.innerHeight,
     });
   
     useEffect(() => {
       const handleResize = () => {
         setWindowSize({
           width: window.innerWidth,
           height: window.innerHeight,
         });
       };
   
       window.addEventListener('resize', handleResize);
       return () => window.removeEventListener('resize', handleResize);
     }, []);
   
     return windowSize;
   };
   
   export default useWindowSize;

결론

커스텀 훅은 코드 재사용성을 높이고, 로직을 분리하여 컴포넌트를 간결하게 만들며, 가독성과 유지보수성을 향상시킵니다. 데이터 페칭, 폼 핸들링, 공통 상태 관리, 이벤트 핸들링 등 다양한 상황에서 커스텀 훅을 활용할 수 있습니다.