본문 바로가기

Programming/React

[React] Resize event / 화면 가로 사이즈 변경 감지 이벤트

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;