matchMedia

핵심: 미디어 쿼리 조건이 현재 환경과 일치하는지 확인하는 메서드.
실천: matchMedia()를 통해 미디어 쿼리를 감지하고, 화면 크기나 디스플레이 조건이 변경될 때마다 해당 이벤트를 처리하고자 할 때 사용

///matchMedia와 change 이벤트 활용
let mediaQuery = window.matchMedia("(max-width: 600px)");

mediaQuery.addEventListener("change", (e) => {
  if (e.matches) {
    console.log("화면 너비가 600px 이하로 변경되었습니다.");
  } else {
    console.log("화면 너비가 600px 이상으로 변경되었습니다.");
  }
});

vs

//reszie활용
window.addEventListener("resize", () => {
  console.log("브라우저 창 크기가 변경되었습니다.");
});

change는 미디어 쿼리 조건이 변하는 순간에 반응.
resize는 창 크기 자체가 변화할 때 반응하는 이벤트.

=> 브라우저 크기가 특정 이상이나 이하 일 때 로직이 필요하다면 matchMedia와 change 이벤트 활용하는 게 더 효율적이다. 왜냐하면 matchMedia로 특정 크기 일 때만 코드를 돌리도록 할 수 있기 때문. resize는 화면 크기가 좀만 변해도 코드를 돌리게 된다.