[JS] resize 이벤트

resize 이벤트란?

브라우저 화면 사이즈가 변경되었을 때 호출되는 이벤트

주의 사항

• 오직 window 객체에서만 발생한다.
• 창 크기의 미세한 조절으로도 여러번 실행되기 때문에 DOM 수정과 같은 복잡한 처리는 하지 않는 것이 좋다.

JS에서의 활용

window.addEventListener('resize', 실행할 함수);

React에서의 활용

React에서는 이벤트 리스너를 제거하지 않으면 컴포넌트가 리렌더되어 useEffect가 실행될 때마다 새로운 이벤트 리스너가 핸들러에 바인딩 된다. 따라서 자주 리렌더될 경우 메모리 누수가 심각해진다. 따라서 아래와 같이 새로운 리스너가 생성되기 전에 기존의 것을 제거해야 한다!

useEffect(() => {
  window.addEventListener('resize', 실행할 함수);
  return () => {
    window.removeEventListener('resize', 실행할 함수);
  }
}, []);