React 반응형 웹앱 만들기 Best media query code

react로 반응형 웹을 만들때 css로 media query를 적용하지만 javascript로도 적용을 할 필요가 있을때가 분명 있습니다.

 

저 같은 경우는 주로 페이지의 width에 따라 컴포넌트를 변경을 해줄때 사용합니다.

 

반응형 웹앱을 위해 검색을 하여 react-responsive, react-media.. 등 주 사용하는것으로 나오는데 react-media같은 경우는 쓰기에는 

 

단순하지 못하고(주관적 의견입니다.) react-responsive같은 경우는 크롬에서 개발자모드에선 잘 작동하지만 일반적으로 사용할때는 잘 

 

적용이 안되었습니다.(NextJS 환경입니다.)

 

계속 찾아보다가 가장 잘 작동하여 적용한 코드를 소개해 드립니다. 장점은 yarn이나 npm으로 설치할 필요도 없고 javascript코드로 바로 쓸 수 있습니다.

 

우선 아래의 코드로 커스텀 훅을 만들어 줍니다.

import {useState, useEffect} from 'react';

export function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => {
      setMatches(media.matches);
    };
    media.addEventListener('change',listener);
    return () => media.removeEventListener('change',listener);
  }, [matches, query]);

  return matches;
}

 

그 후 사용할 컴포넌트에서 아래의 코드로 확인해보면 되겠습니다.

let isPageWide = useMediaQuery('(min-width: 800px)')

useEffect(() => {
  console.log('isPageWide',isPageWide);
}, [isPageWide])