지난번 게시글에 이어서 media-query를 리액트에서 라이브러리로 사용할 수 있는 react-responsive에 대해서 개념 학습을 해보겠습니다!

---

React-responsive

뷰포트의 너비에 따른 다른 레이아웃을 제공하기 위해 즉, 반응형 웹을 제공하기 위해 media-query를 사용하는데, 리액트에서 라이브러리로 사용할 수 있도록 나온 것이 React-responsive 입니다.

react 파일을 만들어서 해당 폴더 경로로 이동을 해 준 후에 먼저 라이브러리를 설치해줍니다.

npm install react-responsive

기본 문법

import { useMediaQuery } from "react-responsive"

const 변수 = useMediaQuery ({
query : "(min/max-width : px)"
})

react-responsive에서는 useMediaQuery Hook 을 사용해서 미디어 쿼리를 이용할 수 있습니다. 쿼리에 있는 조건문에 해당하면 조건에 따른 boolean 값을 리턴해줍니다.

예를 들어서,

export default function App () {
  const isTest = useMediaQuery ({
    query : "(min-width : 800px)"
  })
  
  return (
    <div>
      {isTest && <p>This is Test</p>}
    </div>
  )
}

일 때, 최소 너비가 799px 라면 false, 800px 라면 true 를 반환합니다. 그래서 만약 최소 너비가 800px 이상이라면 화면에는 This is Test 라는 문구가 출력됩니다.

react-responsive 참고한 블로그

---

실제로 시도해보기!

를 했으나..

Module not found: Error: Can't resolve 'web-vitals' in '/Users/parkhyojeong/practice/practice/react-responsive-practice/src'

라는 오류가 발생하여

package-lock.json 파일과 모듈 폴더를 삭제하고 다시 설치해보았지만 여전히 같은 에러가 발생합니다.. 혹시 처음 설치할 때 폴더명을 잘못지정했기 때문일까.. 쿨찌럭
참고한 블로그

폴더명 때문인지 새롭게 설치하고 나니 잘 실행은 되지만 코드상으로 문제가 있는지 미디어쿼리가 반응하지 않습니다. console 로 찍어서 useMediaQuery 값을 찍었으나 800px 미만일 땐 null, 이상일 땐 undefined 가 뜹니다.. 흠... 이와 관련한 문제 해결을 다음 게시글에서 다루어보겠습니다!