[React] 반응형 사용하기(react-responsive)

npm으로 생성된 project folder로 이동

 

아래의 명령어 수행

npm install react-responsive

npm install @types/react-responsive

 

사용하고자 하는 js에서 아래와같이 useMediaQuery import

import { useMediaQuery } from "react-responsive"

 

아래와같이 useMediaQuery 문법을 사용해서 ic->tablet->mobile 구분코드 작성

(여기서 useMediaQuery는 Hook이다)

 

function App() {

...

  const isPc = useMediaQuery( {

    query : "(min-width:1024px)"

  });

  const isTablet = useMediaQuery({

    query : "(min-width:768px) and (max-width:1023px)"

  });

  const isMobile = useMediaQuery({

    query : "(min-width:767px)"

  });

...

const getDeviceType = () => {

    let dev = "Device is ";

 

    if(isPc) {

      dev += "PC";

    } else if(isTablet) {

      dev += "Tablet";

    } else if(isMobile) {

      dev += "Mobile";      

    } else {

      dev += "unknown";

    }

 

    return <p>{dev}</p>;

  }

...

 

return (

    <div>      

      <div>

        {getDeviceType()}

        {/* {isPc && <p>Pc Mode</p>}

        {isTablet && <p>Tablet Mode</p>}

        {isMobile && <p>Mobile Mode</p>} */}

       --> getDeviceType()을 사용해도 괜찮고 isTablet && ~~ 등으로 구성한 방법을 사용해도 됨

 

 

 

 

------------- 참고 useMediaQuery 분법

const <VARNAME> = useMediaQuery ({ query: "<MIN or MAX>-width : px)" });

 

예시.

const isMediumRange = useMediaQuery ({ query:"(min-width:800px) and (max-width:1400px)"});

 --> width 값이 800~1400px range일 때 isMediumRange가 true를 return한다.