리액트 react-device-detect로 디바이스 구분하기

react-device-detect 패키지로 프론트단에서 디바이스를 구분해서 개발할 수 있다.

 

패키지 설치

npm install react-device-detect --save

 

js에서 import해준다.

import {BrowserView, MobileView, isBrowser, isMobile} from "react-device-detect";

 

BrowserView, MobileView는 태그로 사용해서 PC인경우 BrowserView, 모바일인경우 MobileView에 개발한 코드가 출력된다.

 

isBrowser, isMobile은 조건으로 사용하면된다.

 

 

PC 화면

 

 

모바일 화면

 

 

isMobile, isBrowser 예시

let initMapLevel = 7;

if(isMobile){
     initMapLevel = 8;
}