[NextJS] 모바일인지 PC 인지 구별하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

Moblie Web 과 PC Web 에서 작동하는 방식이 생각보다 많이 다르다.

예로 공유하기 버튼을 눌렀을 때도 모바일의 경우 시스템 공유 모달을 띄우면 되지만

PC 에서는 그럴 수 없기 때문에 다르게 작동을 해야한다.

[NextJS] NextJS 모바일 시스템공유 하는방법

그래서 onClick Event 에 함수를 적용하기 전에 Moblie 인지 아닌지 구분 해야하는 경우가 생각보다 많은데

그때를 위해서 userAgent 에서 정보를 가져와서 판별 할 수 있도록 해야한다.

코드도 매우 쉽고 ( 7줄 밖에 안된다. ) 함수 처리해놨으니까 필요할때마다 와서 복사해서 사용할 수 있도록 해야겠다.

getIsMobile.tsx

export const getIsMobile = () => {
  const userAgent = window.navigator.userAgent;
  const isMobile =
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      userAgent
    );
  return isMobile;
};

딱히 설명할 것도 없이 코드도 직관적인 것 같고 짧아서 이해하기도 쉬울 것이다.

중요한거는 window.navigator.userAgent 인데 이게 Console 에서 출력해보면

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

뭐 대충 이런 내용이다. 여기서 보이는 것처럼 Mac OS 이런걸 가지고 현재 내가 PC 에서 보고있는지 Moblie 에서 보고있는지

구별할 수 있는 것이다.