🖍️ Custom Hooks 에 대해

• 사용 이유

  • React 함수 컴포넌트 간에 상태 로직을 재사용하기 위함
  • Custom Hook을 통해 반복되는 로직을 추상화하여 여러 컴포넌트에서 재사용
    
    
  • 코드의 가독성과 유지보수성이 향상
  • 또한, 관심사의 분리가 잘 이루어져 컴포넌트를 더 깔끔하게 유지
  • 코드 품질을 향상

• 구현 방법

  • Custom Hook은 일반 JavaScript 함수
  • 네이밍은 "use" 로 시작
    
    
  • Hook의 규칙을 따르는 것으로
    React가 내부적으로 이 함수를 Hook으로 인식
    
    
  • Custom Hook 내부에서는 React의 기본 Hook(useState, useEffect, useContext 등)을 호출
  • 상태 관리나 사이드 이펙트 처리 등을 수행

• 대표 Custom Hook 예시
  
  

  • useFetch (데이터 패칭 Hook)

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

    
    

  • useLocalStorage (로컬 스토리지 상태 관리 Hook)

    import { useState, useEffect } from "react";
    
    function  useLocalStorage(key, initialValue) {
       const [storedValue, setStoredValue] = useState(() => {
          try {
          const fetchData = async () => {
             try {
                const item = window.localStorage.getItem(key);
                return item ? JSON.parse(item) : initialValue;
             } catch (err) {
                console.log(error);
                return initialValue;
             }
       });
            
       const setValue = (value) => {
          try {
             const valueToStore = value instanceof Function ? 
                   value(storedValue) : value;
             setStoredValue(valueToStore);
             window.localStorage
                   .setItem(key, JSON.stringify(valueToStore));
          } catch (error) {
             console.log(error);
       }};
      
       return [storedValue, setValue];
    }

    
    

  • useFormInput (폼 입력 관리 Hook)

    import { useState } from 'react';
    
    function useFormInput(initialValue) { 
       const [value, setValue] = useState(initialValue);
      
       const handleChange = (e) => {
         setValue(e.target.value);
       };
      
       return {
          value,
          onChange: handleChange,
       };
    }

    
    

  • useToggle (토글 상태 관리 Hook)

    import { useState, useCallback } from 'react';
    
    function useToggle(initialState = false) {
       const [state, setState] = useState(initialState);
      
       const toggle = useCallback(() => setState(state => !state), []);
      
       return [state, toggle];
    }

    
    

  • useAuth (로그인 상태 확인 Hook)

    import { useState, useEffect, useContext, createContext } from 'react';
    
    // useContext와 createContext를 사용하여 인증 상태를 관리
    const AuthContext = createContext();
    
    export function AuthProvider({ children }) {
       const [user, setUser] = useState(null);
      
       // 로그인 시 사용자 상태 설정
       const login = (userData) => {
           setUser(userData);
       };
      
       const logout = () => {
         setUser(null);
       };
    
       return (
         <AuthContext.Provider value={{ user, login, logout }}>
             {children}
         </AuthContext.Provider>
     );
    }

    
    

  • useDidMount (컴포넌트 마운트 시점 확인 Hook)

    import { useEffect } from 'react';
    
    // 마운트되었을 때 한 번만 실행되어야 하는 로직을 관리
    function useDidMount(effect) {
       useEffect(effect, []);
    }

    
    

  • useWindowSize (윈도우 창 크기 확인 Hook)

    import { useState, useEffect } from 'react';
    
    // 브라우저 윈도우의 크기 변화를 감지
    // 해당 값들을 반환하는 커스텀 훅
    function useWindowSize() {
       const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
       
       useEffect(() => {
          const handleResize = () => {
             setSize({ width: window.innerWidth, height: window.innerHeight });
         };
         
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
       }, []);
    }

    
    

  • usePrevious (이전 상태값 저장 Hook)

    import { useEffect, useRef } from 'react';
    
    function usePrevious(value) {
       const ref = useRef();
      
       useEffect(() => {
         ref.current = value;
       }, [value]);
      
       return ref.current;
    }