[책] 자바스크립트 코드 레시피 278 - 112일차

화면 사이즈 이벤트 처리하기

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

구문

resize 브라우저 윈도우 창의 사이즈 변환 시점

설명

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

실습

index.html

<p>윈도우 가로 길이 <span id="widthLog"></span></p>
<p>윈도우 세로 길이 <span id="heightLog"></span></p>

---

script.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초 이상 사이즈 변화가 없을 때 작업을 실행하도록 설정합니다. 실습해봅니다.

let resizeTimer;
window.addEventListener('resize', () => {
  if (resizeTimer != null) {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(() => {
    onResize();
  }, 1000);
});
function onResize() {
  console.log('처리');
};

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