[React] 반응형 웹 개발? react-responsive가 다해줘!!!

웹 개발을 하면서 가장 중요한 부분 중 하나가 다양한 디바이스에서 동일한 사용자 경험을 제공하는 것이라고 생각했다.

특히 모바일 사용자가 많아지면서 반응형 웹 디자인의 중요성이 더욱 커졌다고 개인적으로?는 생각한다.

기존에는 CSS의 미디어 쿼리를 사용해 반응형 웹을 구현했지만,

React 환경에서는 더 효율적인 방법이며, 반응형 웹을 쉽게 구현할 수 있게 도와주는 'react-responsive' 라이브러리를 개념정리해보고자 한다.

---

react-responsive란?

react-responsive는 React 애플리케이션에서 반응형 디자인을 구현하기 위한 라이브러리이다.

이 라이브러리는 CSS 미디어 쿼리를 React 컴포넌트 레벨에서 쉽게 적용할 수 있도록 도와준다.

기본적으로 브라우저의 크기나 기기 특성에 따라 다른 컴포넌트를 렌더링하거나, 스타일을 변경하는 기능을 제공한다.

 

react-responsive는 주로 다음과 같은 두 가지 방식으로 사용할 수 있다!

 

1. useMediaQuery 훅: 함수형 컴포넌트에서 미디어 쿼리 조건을 확인할 수 있는 React 훅
2. MediaQuery 컴포넌트: JSX 내에서 직접 조건부 렌더링을 할 수 있는 컴포넌트

이 라이브러리를 사용하면 JavaScript 로직으로 화면 크기에 따른 조건부 렌더링이 가능해져 더 동적인 UI를 구현할 수 있다.

---

기본 설치 및 환경 설정

react-responsive를 사용하기 위해서는 먼저 npm이나 yarn을 통해 패키지를 설치해야 한다.

# npm 사용 시
npm install react-responsive

# yarn 사용 시
yarn add react-responsive

 

설치가 완료되면 프로젝트에서 바로 사용할 수 있다. 기본적인 사용법을 알아보기 전에, 자주 사용되는 브레이크포인트를 상수로 정의해두면 편리하다.

// breakpoints.js
const size = {
  mobile: '320px',
  tablet: '768px',
  laptop: '1024px',
  desktop: '1440px',
};

const device = {
  mobile: `(min-width: ${size.mobile})`,
  tablet: `(min-width: ${size.tablet})`,
  laptop: `(min-width: ${size.laptop})`,
  desktop: `(min-width: ${size.desktop})`,
};

export default { size, device };

위 코드는 일반적으로 사용되는 디바이스 크기를 상수로 정의한 것이다.

이렇게 정의해두면 프로젝트 전체에서 일관된 브레이크포인트를 사용할 수 있어 유지보수가 용이해진다.

---

useMediaQuery 훅 활용하기

useMediaQuery 훅은 함수형 컴포넌트 내에서 미디어 쿼리 조건을 확인할 수 있게 해준다.

이를 통해 화면 크기에 따라 다른 로직을 적용하거나 다른 컴포넌트를 렌더링할 수 있다.

아래 예시코드를 살펴보자.

import React from 'react';
import { useMediaQuery } from 'react-responsive';
import breakpoints from './breakpoints';

function ResponsiveComponent() {
  const isMobile = useMediaQuery({ query: `(max-width: ${breakpoints.size.tablet})` });
  const isTablet = useMediaQuery({ 
    query: `(min-width: ${breakpoints.size.tablet}) and (max-width: ${breakpoints.size.laptop})` 
  });
  const isDesktop = useMediaQuery({ query: `(min-width: ${breakpoints.size.laptop})` });
  
  return (
    <div>
      {isMobile && <p>모바일 화면입니다.</p>}
      {isTablet && <p>태블릿 화면입니다.</p>}
      {isDesktop && (
        <div>
          <p>데스크탑 화면입니다.</p>
          <p>더 많은 정보를 표시할 수 있습니다.</p>
        </div>
      )}
    </div>
  );
}

위 코드에서는 useMediaQuery 훅을 사용하여 현재 화면 크기에 따라 다른 내용을 렌더링하고 있다.

화면 크기가 태블릿보다 작으면 모바일 화면으로 간주하고, 태블릿과 노트북 사이의 크기면 태블릿으로, 노트북 크기 이상이면 데스크탑으로 처리한다. 이렇게 하면 각 디바이스에 최적화된 UI를 제공할 수 있다.

 

💡useMediaQuery 훅은 반응형 로직이 컴포넌트 내부에 포함되어야 할 때 유용하다.💡
예를 들어, 화면 크기에 따라 데이터 로딩 방식이나 이벤트 핸들러가 달라져야 하는 경우에 적합하다.

---

MediaQuery 컴포넌트 사용법

MediaQuery 컴포넌트는 JSX 내에서 직접 조건부 렌더링을 할 수 있게 해준다.

특정 미디어 쿼리 조건이 충족될 때만 해당 컴포넌트의 자식 요소를 렌더링한다.

import React from 'react';
import { MediaQuery } from 'react-responsive';
import breakpoints from './breakpoints';

function ResponsiveLayout() {
  return (
    <div className="app-container">
      <MediaQuery maxWidth={breakpoints.size.tablet.replace('px', '')}>
        <MobileNavigation />
        <MobileContent />
      </MediaQuery>
      
      <MediaQuery minWidth={breakpoints.size.tablet.replace('px', '')} 
                  maxWidth={breakpoints.size.laptop.replace('px', '')}>
        <TabletNavigation />
        <TabletContent />
      </MediaQuery>
      
      <MediaQuery minWidth={breakpoints.size.laptop.replace('px', '')}>
        <DesktopNavigation />
        <SideBar />
        <MainContent />
      </MediaQuery>
    </div>
  );
}

위 코드에서는 MediaQuery 컴포넌트를 사용하여 화면 크기에 따라 완전히 다른 레이아웃 구조를 렌더링하고 있다. 모바일에서는 단순한 네비게이션과 콘텐츠를, 태블릿에서는 태블릿에 최적화된 UI를, 데스크탑에서는 사이드바까지 포함한 풀 레이아웃을 보여준다.

 

💡MediaQuery 컴포넌트는 문법적으로 직관적이고, 특히 레이아웃 구조 자체가 크게 달라지는 경우에 유용하다.💡
또한 컴포넌트 구조를 통해 코드의 가독성을 높일 수 있다.