[#. React] react-device-detect 설치 후 웹/모바일 감지해서 반응형 사이트 만들기

 

 

 

 

 

 

react로 웹을 개발하려고 하는데 모바일 사이즈에서도 볼 수 있도록 반응형으로 개발해야 한다

react-device-detect를 설치하면 웹/모바일을 감지해서 따로 코딩할 수 있다

 

 

 

 

 

https://www.npmjs.com/package/react-device-detect

react-device-detect

 

 

 

 

 

 

① react-device-detect 설치

 

npm install --save react-device-detect

 

 

 

 

 

② Landing.js 수정

 

 

⑴ BrowserView, MobileView 사용하기

 

 

mport React from 'react';
import { BrowserView, MobileView } from 'react-device-detect';

function Landing() {

  return(
    <div>
      { /* web */ }
      <BrowserView>
        WEB
      </BrowserView>
      { /* mobile */ }
      <MobileView>
        MOBILE
      </MobileView>
    </div>
  )
}

export default Landing;

 

 

 

 

⑵ isBrowser, isMobile 사용하기

 

import React from 'react';
import { isMobile } from 'react-device-detect';

function NavBar() {

  const renderItems = () => {
    if(isMobile) {
      return <div>MOBILE</div>
    }
      return <div>WEB</div>
  }

  return(
    <div>
      {renderItems()}
    </div>
  )
}

export default NavBar;

 

 

 

 

 

 

웹에서 보는 Landing 페이지에는 <BrowserView></BrowserView> 혹은 isBrowser에 부합하는 내용이 노출된다

 

 

 

 

 

모바일에서 보는 Landing 페이지에는 <MobileView></MobileView> 혹은 isMobile에 부합하는 내용이 노출된다

 

 

 

 

 

 

 

 

이외에도 안드로이드/아이폰, 각각의 브라우저도 감지해서 설정할 수 있으니 필요한 옵션을 잘 선택해서 사용하면 된다