matchMedia를 사용하여 js 버전 미디어 조회 실현

안녕하세요.나는 인재 사업 회사에서 엔지니어로 일하는 깊은 혜택이다.
오늘, 나는 js판 미디어 조회 훅스를 소개하고 싶다.
나는 CSS의 미디어 조회가 덮어쓸 수 없는 필수 조건의 화면이 있다고 생각한다. 예를 들어 React에 플로피 사이트를 설치할 때 PC 버전과 SP 버전에서 표시하고자 하는 요소가 변화할 수 있다.
CSS의 미디어 쿼리display: none;에서도 가능하지만, DOM 요소로 남아있어 인기 있는 구현 방식도 아니다.
이 경우 jsx에 공식을 삽입하는 형식으로 디스플레이 제어를 할 수 있습니다.
윈도 함수를 사용했기 때문에 다른 전방 라이브러리를 사용해도 사용할 수 있습니다.그래서 Anglar와 Vue를 사용하는 분들도 참고해주세요.

window.matchMedia

이번에 소개한 훅스는 window.matchMedia를 사용했다.
matchMedia는 CSS의 미디어 쿼리 문자열을 전달하여 분석 결과를 반환하는 창 함수입니다.
현재 어느 브라우저든지 사용할 수 있다.
ref) https://caniuse.com/matchmedia
예전에 화면 사이즈를 조정할 때 달리기 처리를 하려면 다음과 같이 사건 청중을 설정해야 한다고 생각합니다.

window.addEventListener('resize', () => {
  if (window.innerWidth <= SOME_WINDOW_WIDTH) {
    // 何らかの処理
  }
})

상술한 단점은 1px화면 사이즈의 변화에 따라 사건에 불이 나기 때문에 비교적 무거운 처리를 할 때 비용이 쉽게 나온다는 것이다.
특히 IE 같은 브라우저에서는 동작이 느리다.
matchMedia는 픽셀 수를 초과한 경우에만 이벤트가 발생할 수 있다는 장점이 있다.
화면 크기에 따라 요소를 구분하고자 하는 경우 addEventListener('resize', () => {})처럼 1px의 변화마다 사건이 발생하지 않고 특정 픽셀 수를 초과한 상태에서 디스플레이 판정만 하면 되기 때문에 적합한 시행방식이라고 할 수 있다.

useMediaQuery

실제 소스 코드는 다음과 같다.

import {useCallback, useEffect, useState} from 'react'

type WidthPrefix = 'min' | 'max'

const createQuery = (width: number, prefix: WidthPrefix) =>
  `(${prefix}-width: ${width}px)`

export const useMediaQuery = (width: number, prefix: WidthPrefix = 'min') => {
  const query = createQuery(width, prefix)
  const [matchQuery, setMatchQuery] = useState(matchMedia(query))

  const handleQueryListener = useCallback(() => setMatchQuery(matchMedia(query)), [query])

  useEffect(
    () => {
      matchQuery?.addEventListener('change', handleQueryListener)
      return () => matchQuery?.removeEventListener('change', handleQueryListener)
    },
    [handleQueryListener, query]
  )

  return matchQuery.matches
}

코드 해설

useMedia Query에 대한 매개변수는 두 개입니다.
첫 번째는 한도값 width입니다.
두 번째 지정한 한도값 이상(min) 또는 한도값 이하(max).
두 번째 매개변수의 고정 값도 사용할 수 있습니다.용례에 따라 최적화해 주십시오.
matchMedia에 전달되는 매개 변수는 CSS의 미디어 조회와 마찬가지로 문자열min-width: 966px을 전달합니다.
matchQuery 유형은 MediaQueryList입니다.matchQuery.matches 미디어 조회 목록과 일치할 때 실제 값을 되돌려줍니다.
useEffect의 처리는 호출을 설정하여 미디어 조회의 일치 상황이 변할 때 사건 청중들이 불을 낼 수 있도록 하는 것이다.
검색 문자열이 변하지 않으면, 호출은 같은 결과를 되돌려주기 때문에useCallback 캐시를 사용합니다.
또한useEffect의 정리 함수removeEventListener도 미리 설정했다.

사용법

import React, {FC} from 'react'
import {useMediaQuery} from '../useMediaQuery'

const LAPTOP_WIDTH = 966

export const HogeComponent: FC = () => {
  const isLaptop = useMediaQuery(LAPTOP_WIDTH, 'min')
  
  return <>
    {isLaptop && <>966px以上で表示されるよ</>}
    {!isLaptop && <>965px以下で表示されるよ</>}
  </>
}

위에서 말한 바와 같이 매개 변수로 한도값과 한도값 이상 또는 이하를 교부할 때boolean 값은 반환된다고 선언한다.
그리고 jsx에서 디스플레이 제어를 하면 완벽합니다.
임계값의 수치는 상수화할 수 있고 CSS와 공통적이면 된다.

최후

대충 설명해 드렸는데 어때요?
각 제품에서 사용 장소의 규칙을 결정하고 활용할 수 있다면 응답 사이트에서 상당히 유익한 훅스라고 생각합니다.
(CSS가 무시할 수 있는 범위는 CSS에서 미디어 쿼리 작성 등)
여기까지가 그거예요. 가능하면 이 hooks가 사용하지 않는 디자인이 좋을 것 같아요. 디자이너가 읽어줄 수 있다면 디자인을 다시 생각해 보세요.)