리액트 - responsive

저번시간에 했던 media query로 반응형웹을 만드는건 html과 css만으로 구현이 가능한것이다.
반응형 웹을 만들때 디자인뿐만 아니라 구조나 기능을 다르게 해야하는 경우가 있는데 react-responsive라는 라이브러리를 통해 반응형 웹을 구현할 수 있다.
ex) pc에선 길게 늘어져있던 메뉴가 모바일에선 메뉴버튼으로 적용(애플홈페이지가 이렇게 되어있다.)

responsive 설치

yarn add react-responsive

설치는 간단하다 yarn을 이용해 라이브러리를 설치해주면 끝이다.

useMediaQuery

useMediaQuery는 responsive라이브러리에서 제공하는 hook이다.
useMediaQuery에 media-query조건을 넣어주면 해당 조건에 따라 true, false boolean값을 리턴해준다.

import {useMediaQuery} from 'react-responsive'

useMediaQuery 문법

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

//ex
const isPc = useMediaQuery ({
query : "(min-width : 1024px) and (max-width :1920px)"
});
// width값이 최소 1024 ~ 1920px 까지의 범위는 isPc가 출력된다.

hook을 왜 사용해야하는가

PC에서는 "web"라는 텍스트를 , 모바일에서는 "mobile" 이라는 텍스트를 보여주려고 할 때 단순 CSS Media-Query로 작성 하려면 매번 두가지 케이스를 작성해서 display : none, block; 으로 나눠서 처리를 해야하는 번거로움이 있다. 하지만 Hook을 사용하면 아래처럼 해결이 가능합니다.

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

const isPc = useMediaQuery ({
    query: "(min-width:1024px)"
}); //리턴값이 boolean이다.

  const text = isPc ? "web" : "mobile"

  return (
    <div>
      {text}
    </div>
  );
}

export default App;

간단한 예제

이제 간단한 예제를 살펴보자. pc사이즈로 들어오면 초록색바탕색에 텍스트는 'PC 사이즈!!'를 출력하고 모바일 사이즈로 들어오면 파랑색바탕색에 텍스트는 '모바일 사이즈!!'를 출력하는 스크립트를 만들어보자.

//MediaQuery.js

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

const Mobile  = ({children}) => { //여기서 children은 하위 컴포넌트이다.
  const isMobile = useMediaQuery({
    query : "(max-width:767px)"
  });
  
  return <>{isMobile && children}</>
}

const PC  = ({children}) => {
  const isPc = useMediaQuery({
    query : "(min-width:768px) "
  });
  
  return <>{isPc && children}</>
}

export  {Mobile,PC};

// app.js

import React from "react";
import { Mobile, PC } from "./MediaQuery.js"
import "./App.scss";


function App() {
  return (
    <>
        <div>
          <Mobile>
            <div className="mobile_container">
            모바일 사이즈 !!
            </div>
          </Mobile>
        </div>
    
        <div className="pc_container">
          <PC >
            PC 사이즈!
          </PC>
        </div>
    </>
      )
}

export default App;