useMediaQuery로 React 반응형 코딩

react-responsive

• useMediaQuery를 사용하기 위해선 react-responsive를 설치해야 함
• 설치
  npm i react-responsive

useMediaQuery

Ex)

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

export const Mobile: React.FC = ({ children }) => {
  const isMobile = useMediaQuery({
    query: "(min-width:0px) and (max-width:599px)",
  });
  return <React.Fragment>{isMobile && children}</React.Fragment>;
};

이렇게 컴포넌트를 만들어놓으면 다른 react파일에서 import해서 쓸 수 있다.

Ex)

import React from "react"
const { Mobile } from "../mediaQuery"

export const Main = () => {
	return (
    	<div>hello</div>
        <Mobile>
        	<div>hi</div>
        </Mobile>
    )
}

https://www.npmjs.com/package/react-responsive