React, useWindowSize 커스텀 훅

useWindowSize.js

import { useState, useEffect } from "react";

function debounce(func, delay) {
    // 디바운스 함수
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func(...args), delay);
    };
}

function getWindowSize () {
    return {
        width: window.innerWidth,
        height: window.innerHeight,
    };
};

function useWindowSize() {
    const [windowSize, setWindowSize] = useState(getWindowSize);
    useEffect(() => {
        const handlerResize = debounce(() => {
            setWindowSize(getWindowSize);
        }, 200); // 200ms 디바운스 지연 시간

        window.addEventListener("resize", handlerResize);
        return () => {
            window.removeEventListener("resize", handlerResize);
        };
    }, []);
    return windowSize;
}

export default useWindowSize;

 

App.js

import { useState } from 'react';
import useWindowSize from "./hooks/useWindowSize";

function App() {
    const { width, height } = useWindowSize();
    return (
        <p>
            width: {width},
            height: {height}
        </p>
    )
}