반응형 웹

테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 별 *뷰 포트에 따라 사용자들에게 보기 쉽게 하기 위해 웹페이지의 크기가 '재조정' 되는 것을 말합니다.

react-responsive 셋팅

• npx create-react-app 작업폴더명

  ※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들자.

• cd 작업폴더명 (작업폴더로 이동)

• npm install react-responsive

  • npm install @types/react-responsive
    (typescript를 사용하는 서비스이기 때문에 아래 모듈도 설치 해줍니다.

useMediaQuery 문법

const 변수명 = useMediaQuery ({
query : "(최소or최대-width : px)"
})

//example
const isPc = useMediaQuery ({
query : "(min-width : 1024px) and (max-width :1920px)"
});
// width값이 최소 1024 ~ 1920px 까지의 범위는 isPc가 출력된다.

Hooks

react-responsive 에서는 useMediaQuery라는 Hook 을 제공합니다.
작동 되는 방식은 useMediaQuery에 media-query조건을 넣어주면 해당 조건에 따라 true, false를 return 해 줍니다.

코드 참고

//App.tsx

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

function App() {

  const isPc = useMediaQuery({
    query : "(min-width:1024px)"
  });
  const isTablet = useMediaQuery({
    query : "(min-width:768px) and (max-width:1023px)"
  });
  const isMobile = useMediaQuery({
    query : "(max-width:767px)"
  });

  return (
  <div>
    {isPc && <p>HI PC</p>}
    {isTablet && <p>HI Tablet</p>}
    {isMobile && <p>HI Mobile</p>}
  </div>
  );
}

export default App;

Hooks가 필요한 이유

Hooks가 필요한 이유는 아래와 같은 상황에서 유용하게 사용됩니다.

• PC에서는 "웹페이지"라는 텍스트를 , 모바일에서는 "모바일" 이라는 텍스트를 보여주려고 할 때 단순 CSS Media-Query로 작성 하려면 매번 두가지 케이스를 작성해서 display : none, block; 으로 나눠서 처리를 해야하는 번거로움이 있습니다.
  하지만 Hooks를 사용하면 아래처럼 해결이 가능합니다.

코드참고 (Hooks가 필요한이유)

// App.tsx

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

const isPc = useMediaQuery ({
    query: "(min-width:768px)"
  });

  const languageText = isPc ? "웹페이지" : "모바일"

  return (
    <div>
      {languageText}
    </div>
  );
}

export default App;

useMediaQuery 응용 (컴포넌트)

위처럼 사용도 가능하지만 , 따로 하나의 파일에 useMediaQuery를 몰아 놓고 해당 컴포넌트만 import 해서 사용도 가능합니다.

// MediaQuery.tsx

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

const Mobile :React.FC = ({children}) => {
const isMobile = useMediaQuery({
  query : "(max-width:767px)"
});
return <React.Fragment>{isMobile && children}</React.Fragment>
}

const PC :React.FC = ({children}) => {
const isPc = useMediaQuery({
  query : "(min-width:768px) "
});
return <React.Fragment>{isPc && children}</React.Fragment>
}

export  {Mobile,PC};

//App.tsx


import React from "react"
import { Mobile, PC } from "./MediaQuery"
import "./App.css"

function App() {

return (
<>
    <div>
      <Mobile>
        <div className="mobile_container">
        이건 모바일 !!
        </div>
      </Mobile>
    </div>

    <div className="pc_container">
      <PC >
        요건 PC !!!
      </PC>
    </div>
</>
  )
}

export default App;

결과화면

참고 : N잡하는 개발자
react-responsive