반응형 웹사이트를 작업하는 도중 JavaScript에서 미디어쿼리를 컨트롤하는 방법이 없을까 하고 검색하다가 알게된 .matchMedia()
을 정리해보겠다!
matchMedia() 함수는 미디어 쿼리를 사용하여 현재 미디어 상태와 일치하는지 확인하기 위해 사용되며, 이 함수를 사용하면 JavaScript에서 동적으로 브라우저의 뷰포트 크기나 특정 미디어 특성에 대한 상태를 감지할 수 있다.
// 미디어 쿼리 문자열 정의
const mediaQueryString = '(max-width: 1040px)'; 1️⃣
// matchMedia() 함수를 사용하여 미디어 쿼리 객체 생성
const mediaQueryList = window.matchMedia(mediaQueryString); 2️⃣
// 초기 상태 확인
console.log(mediaQueryList.matches); // 현재 미디어 상태와 일치하는지 여부를 확인
// 변경 감지 이벤트 등록
function handleMediaChange(mq) { 4️⃣
if (mq.matches) { 4️⃣
// 미디어 쿼리에 일치할 때 실행되는 코드
console.log('현재 미디어 상태와 일치합니다.');
} else {
// 미디어 쿼리에 일치하지 않을 때 실행되는 코드
console.log('현재 미디어 상태와 일치하지 않습니다.');
}
}
// 변경 감지 이벤트 리스너 추가
mediaQueryList.✨addListener✨(handleMediaChange); 5️⃣
// 초기 실행
handleMediaChange(mediaQueryList); 3️⃣
// resize 이벤트에 대한 이벤트 리스너 추가
window.addEventListener('resize', function() { 6️⃣
// 뷰포트 크기가 변경될 때 실행되는 코드
console.log('뷰포트 크기가 변경되었습니다.');
handleMediaChange(mediaQueryList); // 변경 감지 함수 호출 6️⃣
});
위의 코드에서mediaQueryString
에는 원하는 미디어 쿼리 문자열을 정의합니다.
TIP
.matchMedia('only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)')
위와 같이 and로 다양한 조건을 붙여 넣을수도 있다!
window.matchMedia(mediaQueryString)
를 사용하여 해당 미디어 쿼리에 대한 MediaQueryList
변수를 선언한다.
handleMediaChange
함수는 미디어 쿼리 상태가 변경될 때마다 호출되는 콜백 함수로 등록!
이 함수 내에서는 mq.matches
를 통해 현재 미디어 상태와 일치하는지 확인할 수 있다.
mediaQueryList.addListener(handleMediaChange);를 사용하여 미디어 쿼리 상태의 변경을 감지하고, 초기 상태를 확인하기 위해 handleMediaChange(mediaQueryList);를 호출합니다.
resize
로 창 크기가 조절될 때마다 실행되는 이벤트 리스너를 등록합니다. 이 이벤트 리스너 내에서는 handleMediaChange 함수를 호출하여 미디어 쿼리의 변경 여부를 확인하고 적절한 동작을 수행합니다.
mediaQueryList
객체에 대해서는addEventListener
를 사용할 수 없습니다.MediaQueryList
객체에는 ✨addListener
✨ 메서드만 지원합니다.