[DevCamp] 📱 React에서 모바일 대응하기

동건·2025년 4월 29일

React devcamp 모바일

DevCamp

목록 보기

57/85

📱 React에서 모바일 대응하기

React를 사용해 웹 애플리케이션을 개발할 때,
데스크톱 환경뿐만 아니라 모바일 환경에서도 잘 동작하도록 만드는 것이 중요하다.

사용자들의 많은 비율이 모바일 기기를 사용하기 때문에 모바일 대응은 필수가 되었다.

🧹 반응형 웹이란?

반응형 웹(Responsive Web)은 다양한 화면 크기에 따라
콘텐츠와 레이아웃이 자동으로 조정되는 웹 디자인 방식이다.

이를 통해 데스크톱, 태블릿, 모바일 등
다양한 환경에서 동일한 웹사이트를 자연스럽게 사용할 수 있다.

📏 뷰포트 설정하기

모바일 환경에서 적절한 표시를 위해 가장 먼저 해야 할 일은
뷰포트 메타 태그를 설정하는 것이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

이 태그를 설정하지 않으면
모바일 브라우저는 웹페이지를 축소해서 보여주기 때문에 의도한 UI가 나타날 수 없다.

🖼️ CSS 미디어 쿼리 사용하기

CSS의 미디어 쿼리를 사용하면 화면의 너비에 따라 스타일을 다르게 적용할 수 있다.

/* 모바일 우선 */
.container {
  padding: 16px;
}

/* 탭링 이상 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
  }
}

/* 데스크토프 이상 */
@media (min-width: 1024px) {
  .container {
    padding: 32px;
  }
}

모바일 퍼스트 방식으로 설계하면 기본 스타일은 모바일을 기준으로 작성하고,
점점 넓은 화면에 맞춰 스타일을 확장해 나간다.

⚙️ styled-components에서 미디어 쿼리 사용하기

React에서 styled-components를 사용한다면,
JS 안에서 미디어 쿼리를 관리할 수 있다.

import styled from 'styled-components'

const Box = styled.div`
  padding: 16px;

  @media (min-width: 768px) {
    padding: 24px;
  }

  @media (min-width: 1024px) {
    padding: 32px;
  }
`

코드를 컴포넌트 단위로 나눌 수 있기 때문에 유지보수에 용이하다.

🧐 CSS 단위 사용에 주의하기

모바일 대응 시 px 단위보다는 rem, %, vh, vw 같은 상대 단위을 사용하는 것이 좋다.
폰트 크기나 마진이 기기 해상도에 맞게 자연스럽게 조정되도록 하기 위함이다.

font-size: 1.2rem;
width: 80%;
height: 50vh;

🪠 useWindowSize 훅으로 동적 대응하기

JavaScript로 화면 크기에 따라 다른 개체 및 UI를 조정하고 싶을 때는
useWindowSize 같은 커스텀 훅을 사용한다.

import { useState, useEffect } from 'react'

function useWindowSize() {
  const [size, setSize] = useState([window.innerWidth, window.innerHeight])

  useEffect(() => {
    const handleResize = () => {
      setSize([window.innerWidth, window.innerHeight])
    }
    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return size
}