React.js에서 쉽게 반응형 웹 페이지 만들기 → react-device-detect

실전 프로젝트 Zzz는 웹보다는 앱을 기반으로 하는 서비스이기 때문에 사용자가 모바일에서 접속 시 모바일 사이즈에 맞춰 화면을 보여줘야 하는 데(반응형으로) media query를 사용해서 반응형으로 제작 할 수도 있지만, 웹 사이트에서도 모바일 사이즈에 맞춰 화면을 보여주기 때문에 react-device-detect를 사용해서 웹과 모바일을 구분해서 사용자에게 화면을 보여줄 계획이다.

웹에서 보여지는 화면 View

패키지 설치

npm install react-device-detect --save

or

yarn add react-device-detect

 

패키지 적용

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

function App() {
  return (
    <div className="App">
      <div>
        {isMobile ? (
          <MobileView>MOBILE</MobileView>
        ) : (
          <BrowserView>WEB</BrowserView>
        )}
      </div>
    </div>
  );
}

export default App;

 

참고 사이트

https://www.npmjs.com/package/react-device-detect

react-device-detect

https://gofo-coding.tistory.com/entry/Reactjs-react-device-detect

[React.js] react-device-detect

https://developer0809.tistory.com/93

[#. React] react-device-detect 설치 후 웹/모바일 감지해서 반응형 사이트 만들기

https://github.com/HabitMonster/HabitMonster-FrontEnd

GitHub - HabitMonster/HabitMonster-FrontEnd: 몬스터가 성장하는 만큼, 당신의 습관도 성장할 거에요. 몬스