[React] 반응형 웹 (Media Query, react-responsive)

웹페이지는 다양한 환경에서 접근할 수 있다.

 

PC에서 만날 수 있고,

모바일로도 만날 수 있고,

태블릿으로도 만날 수 있다.

 

우리는 웹사이트를 개발하기 전, 설계 단계에서 이를 고려해야 한다.

 

디자이너가 있는 프로젝트에서는 이를 고려한 디자인이 나오고, 

이에 맞춰 퍼블리싱을 해야 한다.

 

반응형 웹을 만드는 방식은 여러가지가 있다.

 

기존에 사용되던 반응형 웹 만드는 방법

1. Media Query

각 화면의 비율마다 필요한 스타일을 적용할 수 있도록 도와준다.

 

실제 코드에서 사용했던 미디어 쿼리 : 

@media all and (max-width: 1080px) {
	// 적용할 스타일 속성들을 작성
}

1080px 이하의 화면에서는 {} 안에 적는 스타일 속성들로 적용되어 보여진다.

 

@media 뒤에 붙는 all에는 다른 여러 미디어 타입들이 들어갈 수 있으나 all이나 screen이 가장 많이 쓰인다.

아무것도 적지 않으면 all이 기본값이 되어 들어간다.

all은 모든 미디어 타입에 해당된다는 뜻이고, screen은 컴퓨터 스크린에 해당된다는 뜻이다.

 

and 뒤에 적은 max-width 자리에는 max-width 와 min-width 가 가장 일반적으로 쓰인다. 

 

그 외 height, color, orientation(화면의  가로 세로 방향), device-width, device-height 등도 있다.

 

max-width는 뒤에 적는 px 이하의 화면에서 적용된다는 뜻이고, 

min-width는 뒤에 적는 px 이상의 화면에서 적용된다는 뜻이다.

 

이렇게 컴포넌트들을 만들 때 미디어쿼리를 사용하면 반응형에 대응하도록 코드를 짤 수 있다.

 

2. Fluid Grid

그리드의 폭을 px같이 고정적인 값으로 설정하는 것이 아닌

em이나 rem, %로 설정하는 것을 말한다.

 

가로폭의 길이 변화에 따라 컬럼의 크기가 상대적으로 변한다.

 

3. Liquid Layouts

너비를 상대적인 단위로 지정해주어

화면 크기에 따라 유동적으로 보여지게 된다.

 

미디어쿼리를 사용하여 화면 크기마다 다른 레이아웃 구성을 만들어준다.

 

 

React에서 반응형 웹 만드는 방법

1. react-responsive의 Hook 사용하기

react-responsive라는 라이브러리에서 제공하는 Hook을 사용하여 반응형웹을 구현할 수 있다.

npm install react-responsive

 

2. useMediaQuery

const isDesktopOrLaptop = useMediaQuery(
    { minDeviceWidth: 1224 },
    { deviceWidth: 1600 } // `device` prop
)
 
return (
<div>
    {isDesktopOrLaptop &&
        <div>
          ...
        </div>
    }
</div>
)

react-responsive 라이브러리에서 제공하는 useMediaQuery를 사용하여

특정 화면 크기에 대한 기준을 지정해 둘 수 있다.

 

이후 플래그로서 특정 상황에서만 출력하도록 사용할 수 있다.

 

컴포넌트로 만들어  사용되는 방식도 유용하게 잘 쓰인다.

import { useMediaQuery } from 'react-responsive'
 
const Desktop = ({ children }) => {
  const isDesktop = useMediaQuery({ minWidth: 992 })
  return isDesktop ? children : null
}
const Tablet = ({ children }) => {
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })
  return isTablet ? children : null
}
const Mobile = ({ children }) => {
  const isMobile = useMediaQuery({ maxWidth: 767 })
  return isMobile ? children : null
}
const Default = ({ children }) => {
  const isNotMobile = useMediaQuery({ minWidth: 768 })
  return isNotMobile ? children : null
}
 
const Example = () => (
  <div>
    <Desktop>Desktop or laptop</Desktop>
    <Tablet>Tablet</Tablet>
    <Mobile>Mobile</Mobile>
    <Default>Not mobile (desktop or laptop or tablet)</Default>
  </div>
)
 
export default Example

 

 

이렇게 반응형웹 만드는 방법을 살펴보았다.

 

웹 개발을 할 때 아무래도 처음부터 반응형을 염두하고 설계하긴 쉽지 않겠지만

이를 미리 고려하여 설계해두어야 나중에 스타일 관련 코드들을 대량 뜯어 고쳐야하는 대참사를 막을 수 있다.

 

출처 : 

https://velog.io/@pyo-sh/React-Responsive 

[React] React-Responsive / 반응형 웹 만들기