축구팀 관리 프로젝트 23일차 - 리엑트 반응형으로 화면 비율 고정

축구팀 관리 프로젝트 23일차 - 리엑트 반응형으로 화면 비율 고정

 

 

리엑트로 웹프로젝트 개발하면서 화면의 페이지 비율 변경시 만들어놓은 몇몇 컴포넌트들이 깨지는 현상을 발견하게 되었습니다. 이를 해결하기 위해 다양한 방법을 찾아보았습니다.

 

 

리엑트 반응형으로 화면 비율 고정하는법

 

[React] 반응형으로 화면 비율 고정하기: 화면 크기가 변해도 해상도 유지하기

 

 

위 페이지에서 많은 인사이트를 만날 수 있었습니다. 페이지에선 아래처럼 화면을 일정 비율로 조정하는 모듈을 만들어 사용하도록 하였습니다.

 

import "./style.css";

/**
 * @param {number} 원본 화면의 width (px 단위)
 * @param {number} 원본 화면의 height (px 단위)
 * @return {function()} 현재 화면의 크기대로 frame을 조정하는 함수
 */
export const getResizeEventListener = (standardWidth, standardHeight) => {
  const setFrames = () => {
    const root = document.querySelector("#root");
    const app = document.querySelector("#App");

    let width = root.clientWidth;
    let height = width * (standardHeight / standardWidth);

    if (height > root.clientHeight) {
      height = root.clientHeight;
      width = height * (standardWidth / standardHeight);
    }

    app.style.width = `${standardWidth}px`;
    app.style.height = `${standardHeight}px`;
  };

  return () => {
    setFrames();
  };
};

 

개인적으로 고민했던 px단위로 고정된 컴포넌트에 대해 어떻게 해결해야할 지도 의문이었는데 style의 zoom 속성으로 해결하 수 있다는 것을 알 수 있었습니다.

 

import "./style.css";

/**
 * @param {number} 원본 화면의 width (px 단위)
 * @param {number} 원본 화면의 height (px 단위)
 * @return {function()} 현재 화면의 크기대로 frame을 조정하는 함수
 */
export const getResizeEventListener = (standardWidth, standardHeight) => {
  return () => {
    const root = document.querySelector("#root");
    const app = document.querySelector("#App");

    // 원하는 해상도로 width, height 고정
    app.style.width = `${standardWidth}px`;
    app.style.height = `${standardHeight}px`;

    let width = root.clientWidth;
    let height = width * (standardHeight / standardWidth);
    
    // style.zoom을 이용하여, 화면을 크기를 조정
    app.style.zoom = height / standardHeight; 

    if (height > root.clientHeight) {
      height = root.clientHeight;
      width = height * (standardWidth / standardHeight);
      
      // style.zoom을 이용하여, 화면을 크기를 조정
      app.style.zoom = width / standardWidth; 
    }
  };
};

 

이제 이 정보를 토대로 테스트해보며 실제로 효과가 있는지 해봐야될 것 같습니다.

 

▼ 이전 진행한 프로젝트들 ▼

 

내일배움캠프 백오피스 프로젝트 - 펫시터 매칭 사이트 후기, 소감

 

내일배움캠프 Node트랙 심화 프로젝트 역할 및 진행사항