react-responsive

사용하기에 앞서서..

const text = "";
return (
  <Container>
    //Mobile 에서만 보이는 이미지 ->  <img src="sorce" alt="이미지">
    //PC에서는 컴퓨터, Mobile 에서는 모바일 -> {text}
      <Component />
  </Container>
)

먼저 react-responsive를 왜 사용하는지 부터 알아보자. 반응형 웹을 고려하며 UI를 설계하게 되는데, 미디어 쿼리를 이용하여 PC, Mobile 등의 기기를 고려한다.

만약에 특정 기기에서만 다른 구조를 보여주거나 변경되는 값이 있다고 가정해보자.

  <PcContainer>
      <img src="sorce" alt="이미지">
      컴퓨터
      <Component />
  </PcContainer>
  <MobileContainer>
      모바일
      <Component />
  </MobileContainer>

react-responsive를 사용하지 않는다면, PC와 Mobile에 대한 Container를 따로 만들고 안에서 Component를 불러온다. 그 후 모바일은 display none하고, 미디어쿼리를 이용하여 특정 뷰포트에서 display block 와 같은 방법으로 UI를 출력한다. 이때, PC는 모바일에서 보이지 않도록 위와 비슷한 방법으로 처리하면 될 것이다.

물론 가독성이 떨어지는 방법은 아니지만 조금 더 효율적이고 높은 가독성의 코드가 보고싶다.

react-responsive 공식 문서

설치

yarn add react-responsive
yarn add @types/react-responsive

useMediaQuery 조건부 렌더링

import { useMediaQuery } from 'react-responsive'

const isPC = = useMediaQuery ({
query : "(min-width : 768px) and (max-width :1920px)"
});

useMediaQuery라는 Hooks를 사용할 수 있다. query에 min값이나 max값 또는 둘 모두를 설정하면 된다. 현재 뷰포트에 맞게 true나 false를 반환하는 boolean 값을 가진다. 위의 경우 768~1920px에서 true이다.

이제 이전에 알아보았던 예제를 useMediaQuery를 사용하여 해결해보자.

import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isPC = = useMediaQuery ({query : "(min-width : 768px)"});

  const text = isPC ? "컴퓨터" : "모바일";
  return (
    <Container>
        {!isPC && <img src="sorce" alt="이미지">}
        {text}
        <Component />
    </Container>
  )
}

이미지는 모바일에서만 보일 것이고, 뷰포트에 맞게 isPC값을 이용하여 text를 초기화하고 렌더링 해줄 것이다.

react-responsive를 사용하면 이렇게 조건부 렌더링으로 해결할 수 있다. 최적화된 조건부 렌더링 에서 알 수 있듯이 reflow를 많이 발생시키는 작업도 아니기 때문에 효율적이다.

또한 useMediaQuery({ minWidth: 1024 })와 같이 camel-cased 를 사용할 수도 있다.

import { useMediaQuery } from 'react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery(
     { minDeviceWidth: 1224 },
     { deviceWidth: 1600 } // `device` prop
  )

  return (
    <div>
      {isDesktopOrLaptop &&
        <p>
          this will always get rendered even if device is shorter than 1224px,
          that's because we overrode device settings with 'deviceWidth: 1600'.
        </p>
      }
    </div>
  )
}

상황에 맞게 출력도 가능하다.

onChange

import React from 'react'
import { useMediaQuery } from 'react-responsive'

const Example = () => {

  const handleMediaQueryChange = (matches) => {
    // matches will be true or false based on the value for the media query
  }
  const isDesktopOrLaptop = useMediaQuery(
    { minWidth: 1224 }, undefined,  handleMediaQueryChange
  );

  return (
    <div>
      ...
    </div>
  )
}

isDesktopOrLaptop에 따라 호출 될 핸들러를 설정할 수 있다. 이것도 매우 유용해 보인다.

import React from 'react'
import MediaQuery from 'react-responsive'

const Example = () => {

  const handleMediaQueryChange = (matches) => {
    // matches will be true or false based on the value for the media query
  }

  return (
    <MediaQuery minWidth={1224} onChange={handleMediaQueryChange}>
      ...
    </MediaQuery>
  )
}

위의 방법을 MediaQuery로 사용할 수도 있는데, 이렇게 하면 뭔가 styled-components를 어떻게 적용할지.. 모르겠다.

Easy Mode

import { useMediaQuery } from 'react-responsive'
 
const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 992 })
  return isDesktop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768 })
  return isNotMobile ? children : null
}
 
const Example = () => (
  <div>
    <Desktop>Desktop or laptop</Desktop>
    <Tablet>Tablet</Tablet>
    <Mobile>Mobile</Mobile>
    <Default>Not mobile (desktop or laptop or tablet)</Default>
  </div>
)
 
export default Example

이것도 유용해보인다. 한눈에 봐도 쉽게 알아볼 수 있어 직관적이고, 설계하기도 편리할 것 같다. 커스터마이징도 쉬워 보인다.

이 외에 더 많은 사용법이나 Context에 대한 내용이 궁금하면 react-responsive 공식 문서를 참고하자