React에서 PC/모바일 각각 라우팅하기

반응형 웹 디자인을 사용하면 접속하는 기기의 사이즈에 따라 페이지의 크기를 유동적으로 구성할 수 있다.

하지만 필요에 따라 모바일과 PC에서 아예 다른 화면을 보여줘야할 때가 있는데, 이럴 때 사용할 수 있는 방법이다.

 

package react-device-detect

 

 

 

npm을 이용해 react-device-detect 패키지를 설치하고,

 

npm install react-device-detect --save

 

 

App.js에 공식 페이지에서 안내하는 용법에 따라 코드를 입력해준다.

 

 

 

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <BrowserView>
          <h1> This is rendered only in browser </h1>
        </BrowserView>
        <MobileView>
          <h1> This is rendered only on mobile </h1>
        </MobileView>
      </header>
    </div>
  );
}

 

 

아래와 같이 결과를 확인할 수 있다.

 

 

 

 

 

만약 View가 필요하지 않다면, isMobile을 사용해서 조건부 렌더링을 하는 방법도 있다.

 

 

 

 

이외에도 IE로 접속하는 경우엔 isIE 선택자를 이용해 메시지를 띄우거나, 특정 브라우저의 경우 커스텀뷰를 띄우는등 다양한 기능들을 지원하니 공식 페이지를 확인하면 좋을 것 같다.