React - window.matchMedia( ) 사용하기

matchMedia()는 자바스크립트에서 CSS 미디어쿼리처럼 작동하는 것으로, 아래와 같이 사용할 수 있다. (mql은 임의로 정한 것-mediaQueryList의 약자)

let mql = window.matchMedia(mediaQueryString)

mediaQueryString 부분에는 아래처럼 CSS 미디어 쿼리 문법이 들어간다.

let mql = window.matchMedia("screen and (max-width:650px)");

위의 mql를 콘솔에 출력해보면 다음과 같다.

MediaQueryList {
  media: "screen and (max-width: 650px)",
  matches: true,
}

matchMedia() 함수는 MediaQueryList라는 객체를 반환하는데, 이는 media와 matches라는 두 가지 프로퍼티를 가지고 있다.

• media는 사용한 미디어쿼리 문자열을 반환하고,
• matches는 현재 화면이 미디어쿼리의 범위에 들어가면 true, 아니면 false를 반환해준다.

이러한 특성을 이용해 화면 크기가 650px보다 작으면 텅 빈 div를 렌더링하고, 650px보다 크면 SearchForm이라는 컴포넌트를 렌더링해주는 코드를 작성해보자.

📍__ 예시

const SearchHeader = ({ onSearch, onLogoClick }) => {
    const [mQuery, setMQuery] = useState(
        window.innerWidth < 650 ? true : false
    );
    
    const screenChange = (event) => {
        const matches = event.matches;
        setMQuery(matches);
    }
   
    useEffect(() => {
        let mql = window.matchMedia("screen and (max-width:650px)");
        mql.addEventListener("change", screenChange);
        return () => mql.removeEventListener("change", screenChange)
    }, [])

    return (
	  <div>
              {mQuery?(
                  <></>
              ):(
                  <SearchForm onSearch={onSearch} />
              )}
          </div>
   	);
};
export default SearchHeader;

mediaQueryList 객체를 변수 mql에 할당한 후 mql에 이벤트 리스너를 등록하자. 그러면 값이 변할 때 즉, 화면크기가 650보다 작았다가 커지거나 크다가 작아지면 등록된 콜백함수(여기선 screenChange)를 호출해준다.

콜백함수가 받아온 이벤트를 출력해보면 다음과 같다.

MediaQueryListEvent {
  isTrusted: true,
  media: "screen and (max-width: 650px)",
  matches: false,
  type: "change",
  target: MediaQueryList,
  //...
}

여기서 match 프로퍼티를 이용하면 화면크기가 window.matchMedia()에 전달해준 미디어쿼리 스트링에 해당하는지에 대한 여부를 불리언값으로 알 수 있게 된다.

그 값으로 state(여기선 mQuery)를 업데이트 해주면, 화면크기에 따라 자동으로 렌더링해줄 수 있게 된다.

❗ 언마운트 시 등록되었던 리스너를 제거해주기 위해 cleanup function을 꼭 리턴해주자.

Reference

• https://blog.outsider.ne.kr/1153
• https://medium.com/swlh/using-window-matchmedia-for-media-queries-in-reactjs-97ddc66fca2e