리액트 반응형 웹 구현하기

 

반응형 웹

테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 화면 크기에 따라서 사용자들에게  최적화 된 화면을 재공하기 위해  웹 페이지의 사이즈가 '재조정' 되는 것을 말합니다.

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;

 

출처 : https://velog.io/@st2702/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-Media-Query