My-world 개발 보고서 : 반응형 웹을 만드는 두 가지 방법

미디어쿼리 다루기

1. react-responsive : jsx.element를 직접 다룸
2. @media : 스타일링을 통해 적용

react-responsive

설치

npm i react-responsive

사용 방법

//isMobile에 모바일 기기인지 boolean type으로 저장됨
const isMobile = useMediaQuery({ maxWidth: 767 });
...
{isMobile?<Empty/>:<Empty2/>}

MediaQuery 컴포넌트

공통으로 처리하기 위해 MediaQuery컴포넌트를 만들었다.

MediaQuery 컴포넌트를 이용하여 JSX.Element를 Props로 전달하고 올바른 디바이스 크기에서만 Props를 반환하도록 구현하였다.

utils/MediaQuery.ts

import { useMediaQuery } from "react-responsive";

type MediaQueryType = (props: { children: JSX.Element }) => JSX.Element | null;

export const PCandTab: MediaQueryType = (props) => {
  const isnotMobile = useMediaQuery({ minWidth: 768 });
  return isnotMobile ? props.children : null;
};

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

Home.tsx

import { Mobile } from "utils/MediaQuery"; 
...
<Mobile>
   <TopBar />//모바일 기기에서만 볼 수 있음.
</Mobile>

react-responsive 참고

@media

@media를 이용해 뷰포트에 따라 코드를 분기처리한다.
scss의 mixin과 include를 이용해 편리하게 이용하였다.

index.scss

$mobile: 767px;
$tablet: 1023px;
$desktop: 1024px;

@mixin mobile {
  @media (max-width: $mobile) and (min-width: 360px) {
    @content;
  }
}
@mixin tablet {
  @media (min-width: $mobile) and (max-width: $tablet) {
    @content;
  }
}
@mixin desktop {
  @media (min-width: $desktop) {
    @content;
  }
}

사용처

@import 'index.scss';
/*tablet, mobile를 제하는 뷰포트를 가지는 기기.
esktop과 mobile 이하에 해당 : ~359px,1024px~*/
...

/*tablet ver : 768~1023px */
@include tablet {
...
}

/*mobile : 360~767px*/
@include mobile {
...
}

참고 : scss에서 미디어쿼리 다루기

결과물 캡처

Tablet

Mobile