React에서 사용자 브라우저를 쉽게 감지하는 방법 react-device-detect

리액트에서 지원하지않는 IE브라우저

IE 는 고작 10% 의 사람들이 사용한다고 한지만,

10%는 엄청난 수치입니다.

 

한 브라우저에서 잘 작동하는 몇 가지 기능이 있지만 다른 브라우저로 전환하면 예상대로 작동하지 않습니다. 

 

최근에 React 프로젝트 중 하나에 추가 한 기능이 IE11과 호환되지 않는 것을 발견했습니다. IE11과 호환되는 기능을 추가하려면 많은 추가 작업이 필요했습니다. 대신 사용자가 IE11을 사용하는 경우 기능을 비활성화하기로 결정했습니다. 내 사용자가 사용중인 브라우저를 확인하는 간단한 방법을 찾고 싶었습니다.

이 기능을 비롯한 많은 기능을 수행 할 수있는 react-device-detect라는 패키지를 살펴 보겠습니다.

😎 시작하기

react-device-detect 라이브러리로 이동하기 전에 타사 패키지없이 이를 수행하는 방법을 살펴 보겠습니다.

MDN Web Docs 에 따르면 window.navigator API를 사용하여 사용자 브라우저를 감지 할 수 있습니다. 하지만 저에게는 그들이 제공하는 예제 코드가 약간 복잡하고 지저분합니다.

var sBrowser, sUsrAg = navigator.userAgent;

// The order matters here, and this may report false positives for unlisted browsers.

if (sUsrAg.indexOf("Firefox") > -1) {
  sBrowser = "Mozilla Firefox";
  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
  sBrowser = "Samsung Internet";
  // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
  sBrowser = "Opera";
  // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
  sBrowser = "Microsoft Internet Explorer";
  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
  sBrowser = "Microsoft Edge";
  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Chrome") > -1) {
  sBrowser = "Google Chrome or Chromium";
  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
  sBrowser = "Apple Safari";
  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
  sBrowser = "unknown";
}

alert("You are using: " + sBrowser);

 

 

이를 수행하는 훨씬 더 깨끗한 방법은 react-device-detect 패키지 를 사용하는 것 입니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

npm install react-device-detect --save

or

yarn add react-device-detect

이 라이브러리를 사용하는 것은 간단합니다. 가져올 수있는 소품이 많이 있습니다. 예를 들어, 브라우저 이름과 버전을 얻으려면, 우리는 가져옵니다 browserName및 browserVersion라이브러리에서.

import { browserName, browserVersion } from "react-device-detect";

console.log(`${browserName} ${browserVersion}`);

      

is~소품 을 사용하여 부울 값을 얻을 수도 있습니다 . 예를 들어, 당신이 사용할 수있는 isChrome, isFirefox, isSafari, isIE, 그리고 더 많은 사용자가 뭔지 브라우저에 따라 true 또는 false 값을 반환합니다.

import { browserName, browserVersion , isIE } from "react-device-detect";

😎 기타 용도

사용자가 브라우저를 감지 게다가, 당신도 함께 운영 체제의 이름과 버전을 감지 할 수 osName및 osVersion. 당신은 또한 확인할 수 있습니다 isWindows또는 isMacOs.

이 라이브러리의 또 다른 좋은 용도는 사용자가 사용중인 장치를 확인하는 것입니다. 이를 통해 애플리케이션이 반응하도록 할 수 있습니다. 그들은이 MobileView, BrowserView, TabletView, 심지어 AndroidView와 IOSView. 사용자가 사용중인 장치에 따라 렌더링 할 항목을 선택할 수 있습니다.