[JS] 크기 변화 감지하는 window.addEventListener("resize")

JS에서 크기 변화 이벤트를 감지하는 방법은 window.addEventListener("resize", function)을 사용하면 된다. 이번 글에서는 window.addEventListener를 사용하는 방법에 대해 기록한다.

---

목차

1. resize 이벤트

---

1. resize 이벤트

resize의 이벤트는 브라우저의 크기를 조절할 때 감지하는 이벤트다.

vue 자체적으로는 resize를 할 수가 없어서 DOM에 mount가 될 때 resize 이벤트를 감지하여 브라우저의 Width와 Height를 가져 온다.

window.addEventListener("resize", function() {
  // resize 감지 시의 로직
})

 

아래와 같이, mounted 단계일 때 window.addEventListener를 사용하여 Vue에 전달을 하고, 다시 Unmont 하기 전에 window 이벤트를 제거해 준다.

mounted() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
},

beforeUnmount() {
    window.removeEventListener("resize", this.handleResize);
}

methods: {
    handleResize(event) {
      const width = window.innerWidth;
      const height = window.innerHeight;
      this.isWeb = width < 900 ? true : false;
      this.isWeb = height < 900 ? true : false;
    }
}

 

addEventListner의 이벤트는 method에 정의하여 사용하면 된다. 즉, mount에서 이벤트 리스너 등록하고, 최초 1번 handleResize 실행하여 넓이와 높이를 가져와 웹인지 아닌지 판별 후 적용한다. 그리고 unmount를 할 때, 해당 이벤트 리스너를 삭제한다. 이 때, Unmount를 하거나 beforedestory를 할 때 적용해도 된다.

 

const width = window.innerWidth;       // 브라우저 화면 넓이
const height = window.innerHeight;     // 브라우저 화면 높이
const out_width = window.outerWidth;   // 브라우저 전체 넓이
const out_height = window.outerHeight; // 브라우저 전체 높이

 

위와 같이, 브라우저의 각각 화면과 전체에 대한 넓이와 높이를 가져올 수 있다.