[React] React 반응형 웹

Introduction

React에서 반응형 웹을 만드는 방법을 알아보려 한다.

 

① react-responsive 설치

React 라이브러리인 react-responsive를 설치하고 useMediaQuery를 import 한다.

npm install react-responsive

import { useMediaQuery } from 'react-responsive';

 

② 컴포넌트 별로 나누기

HomePC 에는 (1024px ~), HomeMobile 에는 (~ 1024px) 의 반응형 쿼리를 만들었다.

//HomePC
const HomePC = () => {
  const isPC = useMediaQuery({
    query: "(min-width:1024px)"
  });
  return (
    <>
      {isPC &&
        <div>
          ~
        </div>
      }
    </>
  );
}

//HomeMobile
const HomeMobile = () => {
  const isMoblie = useMediaQuery({
    query: "(max-width:1024px)"
  });

  return (
    <>
      {isMoblie &&
        <div>
          ~
        </div>
      }
    </>
  );
}

 

③ App.js 에 컴포넌트 나란히 배치

//App.js
function App() {
  return (
    <div className="App">
      <HomePC />
      <HomeMobile />
    </div>
  );
}

 

결과

1024px를 기준으로 화면이 바뀌는 것을 볼 수 있다.