리액트 장치 유형 감지하기

react-device-detect 라이브러리를 사용하면

브라우저 유형 (크롬, 파이어폭스, 사파리, 오페라, IE, Edge)

장치 유형 (모바일, 테블릿, 스마트TV, 콘솔, 웨어러블, 임베디드, 모바일사파리, 아늗로이드, 윈도우폰, IOS) 

등의 확인이 가능하다.

 

그러나 안되는 것도 있다.

테블릿에서 파이어폭스 브라우저를 사용하면 테블릿이 아닌 Desktop로 인식한다.

그래서 어쩔 수 없이 mobile-detect 라이브러리를 섞어 쓰던가 아니면 이 라이브러리로 교체해야 한다.

 

 

일단 md.ts 파일을 만든다.

// md.ts
const MobileDetect = require('mobile-detect')

export const md = new MobileDetect(navigator.userAgent)

if(md.tablet() !== null) 이면 테블릿인 것으로 감지하면 똑바로 감지해준다.

그 외에 나머지는 react-device-detect 것을 섞어서 쓰거나 mobile-detect 만 써도 될 것 같다. 

 

그러면 이런식으로 사용된다.

import { useCallback, useEffect } from 'react'
import { isMobile, isTablet } from 'react-device-detect'
import { md } from '@src/configs/md'

const checkDeviceType = useCallback(() => {
    if (md.tablet() !== null) {
        console.log('Tablet')
    } else if (isMobile && !isTablet) {
        console.log('Mobile')
    } else {
        console.log('Desktop')
    }
    // }
}, [onSetDeviceType, onSetIsMobileView])

useEffect(() => {
    checkDeviceType()
}, [checkDeviceType])

보통 여기까지만 하면 된다.

 

 

 

만약 장치 유형과 관계없이 브라우저 창의 width가 정해놓은 범위보다 작아지게 되었을때 특정 화면을 보여주고 싶다면

먼저 브라우저 창의 크기가 resize 되는 것을 감지하고 width, height 를 반환하는 hook을 추가해준다.

// useWindowResize.ts 

import { useCallback, useLayoutEffect } from 'react'
import debounce from 'lodash/debounce'

export default function useWindowResize(
    debounceTime: number,
    onResized: (size: number[]) => void
) {
    const updateSize = useCallback(() => {
        onResized([window.innerWidth, window.innerHeight])
    }, [onResized])

    useLayoutEffect(() => {
        updateSize()
    }, [])

    useLayoutEffect(() => {
        window.addEventListener(
            'resize',
            debounce(updateSize, debounceTime),
            false
        )
        return () => window.removeEventListener('resize', updateSize)
    }, [debounceTime, updateSize])
}

그 다음에 이 hook의 onResized 함수로 등록해주면 된다.

import useWindowResize from './useWindowResize'

const checkDeviceType = (size: number[]) => {
  if (size[0] < 768) {
    ...
  } else {
    ...
  }
}

// useEffect(() => {
//     checkDeviceType()
// }, [checkDeviceType])

useWindowResize(500, checkDeviceType)