react에서 현재 os 확인하기 (useOs)

JavaScriptTypescriptnextjs

2 months ago

3 min read

until 에서는 현재 os에 따라 cmd + k 또는 ctrl + k 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.

이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.

userAgent

navigator.userAgent 의 정보를 활용하면 os정보를 가져올 수 있어요. MDN에서는 아래와 같이 설명하고 있어요.

The Navigator.userAgent read-only property returns the user agent string for the current browser.

그럼 간단하게 이 정보를 통해 os 정보를 가져오는 useOs hook을 만들어볼까요?

useOs (in Next.js)

server side에서 동작할 수 있기 때문에 state로 감싸고 useEffect에서 값을 가져올 수 있도록 처리해주었어요.

만약 client side에서 동작하는 경우에는 state로 관리될 필요가 없으니 참고해주세요. 언제든 window 객체에 접근할 수 있기 때문이에요.

import { useEffect, useState } from 'react'

const macosPattern =
  /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)|(iPhone)|(iPad)|(iPod)/i

const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i

const getOS = () => {
  if (typeof window === 'undefined') {
    return null
  }

  const { userAgent } = window.navigator

  if (macosPattern.test(userAgent)) {
    return 'macos'
  }
  if (windowsPattern.test(userAgent)) {
    return 'windows'
  }

  return null
}

const useOs = () => {
  const [os, setOs] = useState<'macos' | 'windows' | null>(null)

  useEffect(() => {
    setOs(getOS)
  }, [])

  return os
}

export default useOs

주의할 점

MDN에서는 이 userAgent를 사용하는 것에 대해서 아래와 같이 주의사항을 안내하고 있어요.

Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable. For example: ...

즉, 이 값은 유저에 의해 쉽게 변경될 수 있는 값이고 수정이 가능하다는 내용이에요.

따라서 서비스의 동작에 영향을 미칠 수 있는 곳에서는 사용하지 않는 것이 좋겠습니다.