[JS] 브라우저 크기 변경에 반응하는 이벤트

 

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다.

 

// 1.
window.addEventListener(`resize`, function() {
  
});

// 2.
window.onresize = function() {
	
}

반응형

변경된 사이즈 가져오기

window.onresize = function() {
  const width = window.innerWidth;
  const height = window.innerHeight;	
  
  console.log(width);
  console.log(height);
}

윈도우 창의 현재 가로, 세로 사이즈 정보는 wndow.innerWidth, window.innerHeight 속성에 담겨있습니다.

이벤트가 실행될 때마다 달라지는 크기를 확인할 수 있습니다.

 

React에서 resize 이벤트 다루기

useEffect(()=> {
  const windowResize = () => {
    console.log("resize");
  }

  window.addEventListener(`resize`, windowResize);
 
  return () => {
     window.removeEventListener(`resize`, windowResize);
   }
}, []);

리액트에서는 useEffect 안에 addEventListenr 함수를 넣어놔도 계속해서 바인딩이 되는 문제가 발생합니다.

이를 방지하기 위해서 새로운 바인딩이 발생되기 전에 기존의 리스너를 제거해줘야 합니다.