반응형 웹사이트를 작업하는 도중 JavaScript에서 미디어쿼리를 컨트롤하는 방법이 없을까 하고 검색하다가 알게된 .matchMedia()을 정리해보겠다!

.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️⃣
});

1. 위의 코드에서mediaQueryString에는 원하는 미디어 쿼리 문자열을 정의합니다.

   TIP
   .matchMedia('only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1)')
   위와 같이 and로 다양한 조건을 붙여 넣을수도 있다!

2. window.matchMedia(mediaQueryString)를 사용하여 해당 미디어 쿼리에 대한 MediaQueryList 변수를 선언한다.

3. handleMediaChange 함수는 미디어 쿼리 상태가 변경될 때마다 호출되는 콜백 함수로 등록!

4. 이 함수 내에서는 mq.matches를 통해 현재 미디어 상태와 일치하는지 확인할 수 있다.

5. mediaQueryList.addListener(handleMediaChange);를 사용하여 미디어 쿼리 상태의 변경을 감지하고, 초기 상태를 확인하기 위해 handleMediaChange(mediaQueryList);를 호출합니다.

6. resize로 창 크기가 조절될 때마다 실행되는 이벤트 리스너를 등록합니다. 이 이벤트 리스너 내에서는 handleMediaChange 함수를 호출하여 미디어 쿼리의 변경 여부를 확인하고 적절한 동작을 수행합니다.

❗ 주의 ❗

mediaQueryList 객체에 대해서는 addEventListener를 사용할 수 없습니다. MediaQueryList 객체에는 ✨addListener✨ 메서드만 지원합니다.