본문으로 건너뛰기

useMediaQuery

미디어 쿼리 문자열의 분석 결과를 쉽게 확인할 수 있는 커스텀 훅입니다.

주어진 미디어 쿼리 조건을 현재 viewport가 만족하는지 여부를 boolean 값으로 반환합니다. defaultValue를 통해 미디어 쿼리 결과를 확인할 수 없는 환경(예: SSR)에서 사용할 기본값을 지정할 수 있습니다.


Code​

🔗 실제 구현 코드 확인


Interface​

typescript
function useMediaQuery(mediaQueryString: string, defaultValue?: boolean): boolean

Options​

NameTypeDefaultDescription
mediaQueryStringstring-미디어 쿼리 조건을 나타내는 문자열 (예: '(min-width: 768px)')
defaultValuebooleanfalse미디어 쿼리 결과를 확인할 수 없을 때 사용할 기본값

Usage​

typescript
import { useMediaQuery } from '@modern-kit/react';

const Example = () => {
  const isMatch = useMediaQuery('(min-width: 768px)');

  return (
    <div>
      <p>
        {isMatch
          ? 'viewport 너비가 768px 이상입니다.'
          : 'viewport 너비가 768px 미만입니다.'}
      </p>
    </div>
  );
};

Example​