[22.09.03] 반응형 웹

단기 프로젝트에서 반응형 웹으로 서비스를 구현해야 해서 반응형 웹에 대해서 공부했다!

반응형 웹이란?

태블릿, PC, 모바일 등 다양한 해상도로 접근할 때 동일한 서비스를 제공하기 위한 웹

각 해상도에 따라서 레이아웃과 스타일 변화를 준다

CSS3 Media Query

구체적인 조건을 필요한 스타일에 적용할 수 있도록 확장한 것

Syntax

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

Fluid Grid

그리드의 폭을 고정 값이 아닌 em 또는 %의 값으로 설정하는 것

가로 폭의 길이 변화에 따라서 컬럼의 크기가 상대적으로 변하게 하는 방법

레이아웃에는 변화가 없을 수 있음 → 폭이 좁은 모바일에서는 큰 효과를 못볼수도

Liquid Layouts

레이아웃 크기를 상대적 단위로 지정해서 웹의 크기에 따라 유동적으로 변화를 준다

미디어 쿼리를 이용해서 일정 크기가 되면 레이아웃 구조를 바꾸어 준다

react-responsive

반응형 웹 구현하면 구조나 기능 자체를 다르게 개발해야 하는 경우가 존재

예) PC에서는 길게 늘어져 있던 메뉴가 모바일에서는 메뉴 버튼으로 바뀌는 경우

npm install react-responsive 명령어로 모듈 설치

useMediaQuery

react-responsive에서 제공하는 훅

공식 문서 예제

import React from 'react'
import { useMediaQuery } from 'react-responsive'
 
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({ minDeviceWidth: 1224 })
  const isBigScreen = useMediaQuery({ minDeviceWidth: 1824 })
  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })
  const isTabletOrMobileDevice = useMediaQuery({ maxDeviceWidth: 1224 })
  const isPortrait = useMediaQuery({ orientation: 'portrait' })
  const isRetina = useMediaQuery({ minResolution: '2dppx' })
 
  return (
    <div>
      ...
    </div>
  )
}

변수를 생성

→ 해당 변수가 조건에 맞는지 아닌지 true / false 검사

import { useMediaQuery } from 'react-responsive'
 
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery(
     { minDeviceWidth: 1224 },
     { deviceWidth: 1600 } // `device` prop
  )
 
  return (
    <div>
      {isDesktopOrLaptop &&
        <p>
          this will always get rendered even if device is shorter than 1224px,
          that's because we overrode device settings with 'deviceWidth: 1600'.
        </p>
      }
    </div>
  )
}

특정 상황에서만 출력하도록 하고 싶은 경우

---

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

반응형 웹페이지란? (with 간단한 반응형 애플사이트 navBar만들기!)

[React] 반응형 웹 사이트(홈페이지) 만드는 법