[React] React-responsive로 반응형 구현하기

단일 해상도를 기준으로 UI를 구성하면, 화면 크기가 달라질 경우 레이아웃이 깨지거나 비율이 어색해지는 문제가 발생한다.

특히 모바일, 태블릿, 데스크탑 환경을 모두 고려해야 하는 웹 서비스에서는
각 디바이스에 맞는 반응형 처리가 필수적인데,
이러한 문제를 해결하기 위해 react-responsive 라이브러리를 사용하여 반응형 처리를 적용했다.

react-responsive는 미디어 쿼리를 리액트 코드에서 직접 사용할 수 있도록 도와주는 라이브러리로, 디바이스 크기에 따라 조건부 렌더링을 쉽게 구현할 수 있다.

React-responsive 설치

npm i react-responsive

useDevice 커스텀 훅 생성

디바이스별 조건을 분리하여 재사용할 수 있도록 커스텀 훅을 작성했다.

// useDevice.js

import { useMediaQuery } from "react-responsive";

const useDevice = () => {
  const isDesktop = useMediaQuery({ minWidth: 1025 });               // PC
  const isTablet = useMediaQuery({ minWidth: 769, maxWidth: 1024 }); // 태블릿
  const isMobile = useMediaQuery({ maxWidth: 768 });                 // 모바일

  return { isDesktop, isTablet, isMobile };
};

export default useDevice;

컴포넌트에서 사용

각 디바이스에 따라 다른 UI를 조건부로 렌더링할 수 있다.

// Header.jsx

import useDevice from "../../hooks/useDevice";

function Header() {
  const { isDesktop, isTablet, isMobile } = useDevice();

  return (
    <>
      {isDesktop && (
        <DesktopHeader />
      )}

      {isTablet && (
        <TabletHeader />
      )}

      {isMobile && (
        <MobileHeader />
      )}
    </>
  );
}

export default Header;

react-responsive를 사용하면
미디어 쿼리를 CSS가 아닌 React 코드 레벨에서 제어할 수 있어
상황에 따라 유연하게 UI를 분기할 수 있다.

특히 디바이스별로 완전히 다른 레이아웃을 구성해야 하는 경우,
조건부 렌더링을 통해 보다 직관적으로 반응형 처리를 구현할 수 있다.

Reference

리액트 반응형 웹 (react-responsive)