[JavaScript] 자바스크립트 화면 사이즈 이벤트 처리하기

123_자바스크립트 화면 사이즈 이벤트 처리하기

[적용]

• 윈도우 창의 크기에 따라 처리를 분류하고 싶을 때
• 레이아웃의 크기를 조정하고 싶을 때

---

[문법]

이벤트	발생 타이밍
resize	브라우저 윈도우 창의 사이즈 변환 시점

---

[내용]

resize 이벤트는 브라우저 윈도우 창의 크기가 변경될 때마다 발생한다.

window.addEventListener('resize', () => {
	console.log('윈도우 창이 리사이징되었습니다.');
});

---

[예시]

윈도우 창의 크기가 변경될 때마다 창의 가로와 세로 길이를 표시하는 샘플을 만들어 보자.

 

HTML                                                                                                                                                              index.html

<p>윈도우 가로 길이: <span id="widthlog"></span></p>
<p>윈도우 세로 길이: <span id="heightlog"></span></p>

JavaScript                                                                                                                                                          main.js

/** 가로 길이를 표시하는 요소 */
const widthlog = document.querySelector('#widthlog');
/** 세로 길이를 표시하는 요소 */
const heightlog = document.querySelector('#heightlog');

// 윈도우 사이즈가 변경될 때마다 처리 실행
window.addEventListener('resize', () => {
	widthlog.innerText = `${window.innerWidth}px`;
    heightlog.innerText = `${window.innerHeight}px`;
});

 

resize 이벤트의 부하 문제 처리하기

resize 이벤트는 윈도우 창의 사이즈가 1px만 변해도 발생하며,

무거운 작업을 지속적으로 수행할 경우 부하가 생겨 시스템에 영향을 준다.

문제 해결의 한 방법으로 resize 완료 확인후, 치러 작업을 실행할 수 있다.

타이머를 사용해 완료 후 1초 이상 사이즈 변화가 없을 때 작업을 실행하도록 설정한다.

// 1초 후 처리 실행 타이머
let resizeTimer;

window.addEventListener('resize', () => {
	// resizeTimer 실행 중인 경우 타이머 해제
    if (resizeTimer != null ) {
    	clearTimeout(resizeTimer);
    }
    
    // 1000밀리초 후 onResize() 실행
    resizeTimer = setTimeout(() => {
    	onResize();
    }, 1000);
});

// 처리 작업
function onResize() {}

상황에 따라 matchMedia()와 DOM 사이즈의 변경을 감시하는 Resize Observer로 대체가 가능한 경우도 있다.

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김