[React]react-device-detect: 기기 감지 라이브러리

React로 프로젝트 진행중에 만들고 있는 웹사이트에서 page또는 router로 화면을 이동시에 사용자가 어떤 기기를 사용하고 있는지, 기기별로 확인하여 사용(?), 페이지 이동을 못하게 조건을 걸어둬야 하는 상황이 생겨났다. 이 라이브러리를 이렇게 해서 사용 하지않고, 대부분 사용자의 device따라서 화면을 다르게 만들때 사용한다는데 필자는 조건문으로 화면 이동을 잠궈야 해서 라이브러리를 사용해보고자 한다.

device-detect 라이브러리 썸네일

1. react-device-detect란 무엇인가?

"react-device-detect"는 react에서 사용자 기기 정보 감지할 수 있게 해주는 라이브러리이다. 예를 들면, 내가 만든 웹페이지를 사용하는 사용자가 스마트폰, 태블릿, 테스크톱등 어떤걸 이용하고있는지 확인하고 그에 맞는 개별 화면 또는 사용제한을 걸기도 한다. 필자는 이중에 후자를 설정하기 위해서 라이브러리를 찾아서 사용 해보려고 한다.

사용중인 device 발고도 어떤 브라우저를 사용하는지, 어떤 운영체제를 사용하는지도 확인 가능 하다.

라이브러리 사용전 코드는 아래 같이 여러 조건을 주기전 미리 변수에 각 다 확인하여야 하고, 이후 복잡한 조건 문을 작성해야한다.

const isMobile = /Android|webOS|iPad|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

가장 정확한 react-device-detect 공식 문서를 아래 바로가기로 눌러 확인해보자

공식 문서 바로가기

 

2. react-device-detect 기본 사용법

라이브러리를 사용하기 위해선 당연히 설치를 먼저 진행해야 한다. 설치는 매우 간단하게 할수있다. 아래 명령어를 터미널에 입력하여 설치한다. 필자는 vscode를 이용하고있어 터미널 사용을 쉽게 가능하다.

npm install react-device-detect

 

설치는 쉽게 진행 하고, 완료된 이후 실제 테스트, 실행할 코드를 작성한다. 먼저 예시를 가지고 와봤다.

import { isMobile, isDesktop } from 'react-device-detect';

function Apptest() {
    return (
        <div>
            {isMobile && <p>모바일 사용자</p>}
            {isDesktop && <p>대스크톱 사용자</p>}
        </div>
    );
}

export default Apptest;

위에 코드에서 사용자가 스마트폰을 사용 중이라면 '모바일 사용자'라는 메세지가 나올 것 이고, 컴퓨터를 사용하고 있다면

'데스크톱 사용자'라는 메시지를 보여주는 코드로 테스트가 가능하다. "isMobile", "isDesktop" 변수를 사용해서 간단하게 확인 가능하다.

 

3.  react-device-detect 더 많은 device기기정보 감지하기

기기 종류별로만 감지하는것이 아니고 더 다양한 정보를 제공해준다. 예를 들어, 사용자가 사용 중인 브라우저, 운영체제도 알 수 있다. 예시 코드를 먼저 살펴 보겠다.

import { browserName, osName, isTablet } from 'react-device-detect';

    function AppTest() {
        return (
            <div>
                <p>사용 중인 브라우저: {browserName}</p>
                <p>사용 중인 운영체제: {osName}</p>
                {isTablet && <p>이 기기는 태블릿입니다!</p>}
            </div>
        );
    }

export default AppTest

화면

브라우저 부터 운영체제 까지 확인이 가능한걸 볼수 있다.

지금 진행중인 프로젝트에서는 device 기기만 확인해서 조건문을 걸어 하고있다 isMoblie 변수에 'navigator.userAgent' 기반으로 모바일 장치를 감지하는 방식으로 구현되어있는데 'react-device-detect' 라이브러리 사용해서 예외 처리 가능하도록 변경 하려 한다.