React-responsive로 반응형 웹 만들기

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

설치 및 세팅

npm i react-responsive
npm i @types/react-responsive

문법

useMediaQuery

const exam = useMediaQuery({
  query: "(min-width: px) and (max-width: px)"
});

Hook 사용

//App.tsx
const App = () => {
  const isPc = useMediaQuery({ query: '(min-width: 785px)' })
  const isMobile = useMediaQuery({ query: '(max-width: 784px)' })
  return (
    <div>
      {isPc && <p>웹페이지</p>}
      {isMobile && <p>모바일</p>}
    </div>
  );
}
export default App;

Components 사용

//App.tsx
const App = () => {
  return (
    <div>
      <MediaQuery minWidth={ 785 }>
        웹페이지
      </MediaQuery>
      <MediaQuery maxWidth={ 784 }>
        모바일
      </MediaQuery>
    </div>
  );
}
export default App;

easy mode

//App.tsx
const App = () => {
  const Desktop = ({ children }: any) => {
    const isDesktop = useMediaQuery({ minWidth: 992 })
    return isDesktop ? children : null
  }
  const Tablet = ({ children }: any) => {
    const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
    return isTablet ? children : null
  }
  const Mobile = ({ children }: any) => {
    const isMobile = useMediaQuery({ maxWidth: 767 })
    return isMobile ? children : null
  }
  return (
    <div>
      <Desktop>Desktop or laptop</Desktop>
      <Tablet>Tablet</Tablet>
      <Mobile>Mobile</Mobile>
    </div>
  );
}
export default App;

컴포넌트 파일

//MediaQuery.tsx
const Mobile = ({ children }: any) => {
    const isMobile = useMediaQuery({ maxWidth: 785 })
    return <>{ isMobile && children }</>
}

const PC = ({ children }: any) => {
    const isPc = useMediaQuery({ minWidth: 786 })
    return <>{ isPc && children }</>
}

export {Mobile, PC};

//App.tsx
import { Mobile, PC } from './MediaQuery';

const App = () => {
  return (
    <div>
      <PC>
        <div>
          웹사이트
        </div>
      </PC>
      <Mobile>
        <div>
          모바일
        </div>
      </Mobile>
    </div>
  );
}
export default App;

주의점
1. useMEdiaQuery({ ### }) -> ###에 들어가는 부분을 { query: '(min-width: 785px)' }와 같이 입력 시 반응하지 않는다.
2. 컴포넌트 파일에서 여러 함수를 export할 때는 defalut를 사용해서는 안된다.