React-responsive mideaQuery 반응형 적용해보기

CSS mideaQuery를 사용하는 방법도 있지만,

react-responsive 패키지를 통해 구현하는 방법이 있어서 적용해봤다.

 

패키지 설치

yarn add react-responsive

 

useMediaQuery 세팅

// useMideaQuery.js

import { useMediaQuery } from "react-responsive";

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

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

위의 경우에는 모바일과 PC로만 나눴지만 대략적인 분기점은 아래와 같이 설정해도 괜찮다.

 

낮은 해상도의 PC, 태블릿 가로 : ~1024px 
테블릿 가로 : 768px ~ 1023px
모바일 가로, 태블릿 : 480px ~ 767px
모바일 : ~ 480px

 

사용해보기

// Responsive.jsx

import { Desktop,Mobile } from "../../hooks/useMideaQuery"

export const Responsive =()=>{

    return(
        <>
            <Desktop>
                <div>데탑이에옹</div>
            </Desktop>
            <Mobile>
                <div>모바일이에옹</div>
            </Mobile>
        </>
    )
}

 

적용화면

 

데스크탑

 

모바일

 

 

편의상 한 컴포넌트에 집어넣었지만,

모바일과 데스크탑 환경의 view는 아예 다른 경우가 많기 떄문에, 코드 관리를 편하게 하려면 차라리 모바일 컴포넌트 따로 만드는게 더 나을 수도 있다는 생각이 든다.