웹페이지 반응형으로 만들기 (PC, Mobile)

이전 포스트( React 프로젝트 만들기 )에서 프로젝트 실행까지 완료하셨다면 하단과 같은 폴더 구조로 만들어집니다.
이제 반응형으로 웹페이지를 만드는 구조를 만들어볼 예정입니다.
우선 반응형 웹페이지를 만들기 위한 라이브러리를 설치하겠습니다.
- ```
npm install react-responsive
```
설치를 완료하셨다면 PC, Mobile을 체크할 수 있는 함수를 만들어보겠습니다.

src 하위 폴더에 utils 폴더를 만들고, MobileCheck.tsx 파일을 만들어요

MobileCheck.tsx

import { type ReactElement } from "react";
import { useMediaQuery } from "react-responsive";

export function Mobile({ children }: { children: ReactElement }) {
  // PC모드 상태 가져오기 (전역 or props로 받을 수 있음)
  const isMobile = useMediaQuery({ query: "(max-width:768px)" });

  // PC모드면 모바일 화면 숨김
  return <>{isMobile && children}</>
}

export function PC({ children }: { children: ReactElement }) {
  const isPc = useMediaQuery({ query: "(min-width:769px)" });

  // PC모드면 강제로 PC 화면 보여줌
  return <>{isPc && children}</>
}

함수를 만드셨다면 사용해서 PC, Mobile을 나누어보겠습니다.

main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { Mobile, PC } from "./utils/MobileCheck.tsx";

export const AppEntry = () =&gt; {
  return (
    <div>
      <PC>
        <h1>PC 모드에서만 보이는 내용</h1>
      </PC>
      <Mobile>
        <h1>모바일 모드에서만 보이는 내용</h1>
      </Mobile>
    </div>
  );
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AppEntry />
  </StrictMode>
);

PC 화면과 모바일 화면을 나누는 작업을 완료했습니다.
웹페이지에서 PC 화면과 모바일 화면을 디버깅 하는 방법도 설명해드릴게요!
우선, F12를 눌러 DevTools(웹 개발자 도구)를 켜줍니다.
우측 더보기를 누르고, DevTools 창을 우측으로 보내겠습니다. ( 해당 옵션은 선택입니다. 저는 우측이 더 편하더라구요. )
우측에 화면이 나왔다면 컴퓨터 모양을 누르고, 바로 좌측에 스크롤을 하여 크기를 조절하여 PC 화면과 모바일 화면을 확인해보실 수 있습니다.
완료된 화면
- PC 화면 ( Dimensions: Responsive 2521 ( 현재 화면의 width ) x 1528 ( 현재 화면의 height ))
- MobileChekc.tsx에 설정된 min-width가 769이고, 현재 화면의 width가 769이상이기 때문에 PC 화면으로 보입니다.
- Mobile 화면 ( Dimensions: Responsive 768 ( 현재 화면의 width ) x 871 ( 현재 화면의 height ))
- MobileChekc.tsx에 설정된 max-width가 768이고, 현재 화면의 width가 768이하이기 때문에 Mobile 화면으로 보입니다.
이상으로 PC, Mobile 반응형 웹페이지 설정을 완료하였습니다.
다음 포스트에서는 Left, Top, Middle, Right를 나누는 작업을 진행할 예정입니다.
긴 글 읽어주셔서 감사합니다.