import { useState, useEffect } from "react";
import { debounce } from 'lodash';
const App = () => {
// window width 사이즈
const [windowSize, setWindowSize] = useState(window.innerWidth);
// 무한 로딩 방지하고 1초에 한번씩 사이즈 측정
const handleResize = debounce(() => {
setWindowSize(window.innerWidth);
}, 1000);
// window width 사이즈 변경 감지
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
}
}, []);
return (
<div
className={windowSize > 800 ? "web" : "mobile"}
>
</div>
);
}
export default App;