[React] react-device-detect

react-device-detect

React.js에서는 "react-device-detect"를 이용해서 쉽게 반응형 페이지를 만들 수 있다.

 

다양한 기능들을 제공한다.

아래와 같은 모듈들이 있다.

각 기능은 아래 사이트에서 자세히 확인할 수 있다.

 

BrowserView, MobileView, AndroidView, IEView, IOSView, TabletView, WinPhoneView, MobileOnlyView, SmartTVView, ConsoleView, WearableView, CustomView

 

isBrowser, isDesktop, isMobile, isTablet, isSmartTV, isConsole, isWearable, isMobileSafari, isChromium, isMobileOnly, isAndroid, isWinPhone, isIOS, isChrome, isFirefox, isSafari, isOpera, isIE, isEdge, isYandex, isElectron, isEdgeChromium, isLegacyEdge, isWindows, isMacOs, isMIUI, isSamsungBrowser

 

isIOS13, isIpad13, isIphone13, isIpad13

 

osVersion, osName, fullBrowserVersion, browserName, mobileVendor, mobileModel, engineVersion, getUA, deviceType, OSTypes, BrowserTypes

react-device-detect

 

설치

아래 명령어를 통해서 "react-detect-device" 설치할 수 있다.

npm install react-detect-device

 

이용

아래와 같이 import 해서 사용할 수 있다.

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

 

BrowserView 태그를 이용해서 PC에서만 렌더링 되는 컴포넌트를 만들 수 있다.

반대로, MobileView 태그를 이용해서 모바일에서만 렌더링 되는 컴포넌트를 만들 수 있다.

 

isBrowser나 isMobile을 {} 안에서 if 문으로 사용하면, 사용해서 if 

 

예시

아래처럼 사용하면 PC 브라우저에서는 "브라우저(컴퓨터 웹)에서만 보이는 내용입니다."라는 내용이 2개, 모바일 브라우저에서는 "모바일에서만 보이는 내용입니다."라는 내용이 2개 렌더링 될 것이다.

<BrowserView>
	<h2>브라우저(컴퓨터 웹)에서만 보이는 내용입니다.</h2>
</BroswerView>

<MobileView>
	<h2>모바일에서만 보이는 내용입니다.</h2>
</MobileView>


{isBrowser ? <h2>브라우저(컴퓨터 웹)에서만 보이는 내용입니다.</h2> : null}
{isMobile ? <h2>모바일에서만 보이는 내용입니다.</h2> : null}