리액트 웹페이지 만들기 ep.3 - 모바일,데스크톱 구분하여 웹페이지 띄우기(react-device-detect)

2022.03.16 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.1 - 환경 구축, react-create-app 설치 및 테스트

2022.03.18 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.2 - 컴포넌트(component), JSX의 이해 (feat. 화살표함수)

 

리액트 모바일 웹개발을 하려고 하는데 기왕이면 모바일 뷰와 데스트톱 뷰를 구분하여 만들고 싶습니다. 네이버나 다음을 접속할 때 데스크톱으로 접속하면 데스트톱 뷰, 모바일로 접속하면 모바일 뷰로 연결되는 것과 동일하게 말이죠. 즉 데스트톱과 모바일을 감지하여 반응형으로 사이트를 만드는 것입니다. 반응형 웹페이지는 접속형태에 따라 사이즈를 조절하도록 하는 것이 궁극적인 목표이지만 일단 데스크톱과 모바일을 구분해 보도록 하겠습니다.

 

react-device-detect 설치

이를 위해서 npm을 통해 react-device-detect를 설치하면 됩니다. 맥북에서 개발하고 있으니 권한을 위해 sudo를 붙이겠습니다. 이번 명령어에는 -g 옵션이 빠져있는데요. -g 없이 설치하면 해당 폴더에서만 사용할 수 있도록 패키지가 설치되게 됩니다. 앞으로 새로운 패키지는 현재 진행하는 프로젝트에서만 동작하도록 -g 없이 설치하도록 하겠습니다.

 

sudo npm install react-device-detect

 

전에 App.js 에서 return 부분이 채워져 있었는데 이부분은 이제 필요 없으니 지운 후 다시 작성한 전체코드 입니다.

 

import './App.css';
import { BrowserView, MobileView } from 'react-device-detect'

const App = () => {
  return (
    <div className="App">
      <BrowserView>
        데스크톱브라우져!
      </BrowserView>
      <MobileView>
        모바일 브라우져!
      </MobileView>
      
    </div>
  );
}

export default App;

 

react-device-detect 패키지에서 BrowserView, MobileView 컴포넌트를 import 하는 부분입니다.

 

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

 

BrowserView 는 데스크톱으로 접속할 때, MobileView는 모바일로 접속할 때 표시합니다.

 

<div className="App">
  <BrowserView>
    데스크톱브라우져!
  </BrowserView>
  <MobileView>
    모바일 브라우져!
  </MobileView>
</div>

 

* 참고: npm start를 한 후, 코드를 수정하고 반영하기 위해 control+c 를 눌러 종료할 필요 없습니다. 수정한 코드를 저장(맥에서는 command+s) 하면 다시 컴파일 되어 바로 반영됩니다. 오직 서버를 종료할 때만 control+c 하시면 됩니다.

 

테스트

 

데스크톱으로 접속 시

 

모바일로 접속 시

 

 

패키지 하나 설치만으로 쉽게 데스크톱, 모바일 뷰를 접속할 수 있습니다. 

 

모바일로 확인하는 방법

npm start를 할 경우 localhost 로 생성된 주소와 network로 생성된 주소가 보입니다.

 

 

localhost는 현재 코드가 실행되는 컴퓨터의 ip 주소이고, network 주소는 외부에서 접속할 수 있도록 해주는 주소입니다. 192.168.~ 으로 시작하는 주소는 공유기로 부터 나오는 멀티캐스트 주소로, 코드를 실행하는 네트워크와 동일한 공유기에 휴대폰을 와이파이로 연결한 후, 사파리 혹은 크롬에서 위 network 주소로 접속하면 테스트할 수 있습니다.

 

 

데스트톱 뷰와 모바일 뷰를 구분하시는 분들께 도움이 되셨으면 합니다. 

 

오늘도 행복한 코딩생활 되시기 바랍니다. 감사합니다.