[REACT] 반응형 웹 구현하기 (react-responsive)

 

 

 

 

1. 반응형 웹이란?

• PC, 태블릿, 모바일 등 다양한 화면 크기에서 보기 좋게 보이도록 
• 다양한 디바이스로 접근이 가능
• 사용자 편의성이 높은 UI

 

 

2. REACT 시작

1. 패키지 설치

npm install react-responsive # npm
yarn add react-responsive    # yarn

 

 

2. 기본 사용법

• react-responsive는 Media Query를 컴포넌트로 사용할 수록 도와주는 라이브러리입니다. 
• 모바일 화면에서는 특정 컴포넌트를 숨기고, 데스트답에서 다른 컴포넌트를 보여주고 싶을 때 유용하게 쓰인다.

import React from "react";
import { useMediaQuery } from "react-responsive";

const ResponsiveExample = () => {
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });
  const isMobile = useMediaQuery({ maxWidth: 767 });

  return (
    <div>
      {isDesktop && <h2> 데스크탑 화면입니다.</h2>}
      {isTablet && <h2> 태블릿 화면입니다.</h2>}
      {isMobile && <h2> 모바일 화면입니다.</h2>}
    </div>
  );
};

export default ResponsiveExample;

 

 

 

3. 컴포넌트 분리하기

import { useMediaQuery } from "react-responsive";

export const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  return isDesktop ? children : null;
};

export const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1023 });
  return isTablet ? children : null;
};

export const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 });
  return isMobile ? children : null;
};

 

import React from "react";
import { Desktop, Tablet, Mobile } from "./Responsive";

const App = () => (
  <>
    <Desktop>데스크탑 전용 페이지</Desktop>
    <Tablet>태블릿 전용 페이지</Tablet>
    <Mobile>모바일 전용 페이지</Mobile>
  </>
);

export default App;