[React] 브라우저 / 모바일 체크 후 라우터 분기처리 하기

 

브라우저 환경과 모바일 환경에서의 페이지 분기를 처리를 해보자.

npm i react-device-detect

 

해당 라이브러리를 설치하면 대표적으로 사용할 수 있는 4가지를 사용해보자.

import { BrowserView, MobileView, isBrowser, isMobile } from 'react-device-detect'

 

먼저 isBrowser , isMobile 은 boolean 형태로 return 되며 조건부 렌더링에 따라 화면 렌더링이 가능하다.

function App() {
  return (
    <>
      {isMobile ? (
        <MobileMain />
      ) : (
      	<BrowserMain />
      )}
    </>
  );
}

 

필자는 해당방법보다는 BrowserView, MobileView 로 분기처리 하는 것을 좀 더 선호한다.

import { BrowserView, MobileView } from 'react-device-detect'

export default function Router() {
	return (
		<>
        {/* { 브라우저 환경일 경우 라우팅 } */}
			<BrowserView>
				<BrowserRouter>
					<Routes>
						<Route path="/" element={<Main />} />
					</Routes>
				</BrowserRouter>
			</BrowserView>
         {/* { 모바일 환경일 경우 라우팅 } */}
			<MobileView>
				<BrowserRouter>
					<Routes>
						<Route path="/" element={<MobileMain />} />
					</Routes>
				</BrowserRouter>
			</MobileView>
		</>
	)
}

 

Browser , Mobile , Tablet 등 타입도 제공하니, 해당 라이브러리 index.d.ts 를 살펴보면 더욱 편리하다.