matchMedia 메서드

matchMedia는 무엇인가?

 

window 객체에서 지원하는 메서드(API)이다. 

document 내부에 미디어 쿼리 상태를 javascript에 가져와서 사용이 가능한 함수라고 보면 된다. 

 

const isMobileScreen = matchMedia('(min-width: 780px)').matches;

 

위에처럼 사용하면 javascript로 현재 document에 너비가 780px인지 판단해서 boolean값이 isMobileScreen 변수에 할당된다. 

그럼 해당 변수를 사용해서 현재 화면 크기에 따라 분기처리가 가능해진다.

 

그럼 언제 matchMedia가 필요할까?

 

위와 같이 화면 너비에 따라 분기처리가 필요할때도 사용 가능하지만 사내에서는 터치 기기에대한 분기처리를 위해 사용했다.

 

export const IS_TOUCH_DEVICE = matchMedia('(pointer: coarse)').matches;

 

기존에 알던 개념들과 연관성

 

기존에는 media query는 브라우저의 환경이 바뀔때마다(화면 크기 조정, 가로모드 세로모드등) 조건을 판단해서 새로운 스타일 코드를 적용시켰다.

이와 같은 처리는 css에서만 반영이 되는줄 알았지만 javascript에서 특정 브라우저 환경 변화로 인한 로직 변화를 작성해야할 때도 matchMedia라는 API만을 이용해서 간단하게 처리가 가능해져 더 효율적으로 코드를 작성할 수 있을꺼 같다.