리액트 반응형 완벽 구현하기

유저들이 사용하는 사이트를 위해서는 반응형이 꽤나 필수적이다. 어떤 기기에서 접속해도 잘리지 않고 잘 보여야하기 때문. 오늘은 리액트로 구현한 반응형에 대해 이야기해보려고 한다. 

 

반응형을 구현하는 것은 사실 어렵다기 보다는 귀찮은 일에 가깝다. 여기저기 찾아보아도 아주 정확한 값을 제공하는 곳이 없기 때문이다. 

반응형을 구현하기 위해서는 아래의 두 가지 테스크를 수행해야한다. 

 

(1) globalStyle 미디어쿼리 적용

(2) svg 이미지 width 값 적용

 

데스크탑 뷰 반응형

(1) globalStyle 미디어쿼리 적용

리액트로 초기세팅을 마쳤다면 보통 globalStyle파일을 만들었을 것이다. 그렇지 않더라도, html에 다음과 같이 미디어쿼리를 적용하면 된다. 이 프로젝트의 경우는 rem단위를 기본으로 사용하였다. 10px이 1rem이 되기 위한 기준이 font-size:62.5%이고, 우리 프로젝트의 디자인은 1920px을 기준으로 만들어졌다. 그렇기 때문에, 1920px이 해당한 1800px 이상의 브라우저에는 font-size:62.5%가 적용되도록 했고, 나머지 브라우저의 경우는 아래와 같이 %값을 조금씩 줄여서 사이즈가 작게 보이도록 구현하였다. 

%값의 경우는 100퍼센트 정확하지는 않다. 노트북별로, PC별로 모두 사이즈가 다르기 때문에 최대한 다양한 기기에서 테스트하며 적용한 %값이지만 약간씩 오차가 있을 수 있다.

여기서 중요한 것은 모든 프로젝트의 스타일 단위는 rem이어야한다. 

  html {
    font-family: sans-serif;
    
    @media (min-width:1800px){
      font-size: 62.5%;
    }
    @media (min-width:1420px) and (max-width:1799px){
      font-size: 46.8%;
    }
    @media (min-width:900px) and (max-width:1419px){
      font-size: 42%;
    }
    @media (min-width: 768px) and (max-width:899px){ 
      font-size: 35%;
    }
    @media (max-width:767px){ 
      font-size: 32%;
    }
    
  }

 

 

(2) svg 이미지 width 값 적용

위와 같이 글로벌스타일에서 미디어쿼리를 적용하면 반응형이 잘 구현되지만, svg이미지는 원래의 사이즈를 그대로 가지고 있게 된다. 이 경우, svg에도 width값(+height값)을 주면 원하는대로 반응형이 잘 들어가진다. 아래의 경우는 BackButtonIc라는 컴포넌트로 적용한 svg에 스타일드 컴포넌트로 width값을 준 경우이다.

const BackButtonIcon = styled(BackButtonIc)`
  width: 11.4rem;
`;

 

모바일 뷰 반응형

위의 예시는 데스크탑뷰에서의 반응형이었고, 아래의 경우는 휴대폰에서의 반응형이다. 마찬가지로 모든 프로젝트의 스타일은 rem으로 적용하였다. 

아래의 프로젝트를 진행할 때에는 10px이 1rem이 아니라, 16px이 1rem으로 기준 삼았었기 때문에 %가 아니라 px로 표기하였지만, 단위는 자유롭게 적용해도 상관없을 듯하다. 모바일 뷰의 경우는 개발자 도구에서도 사이즈를 확인할 수 있기 때문에, 일일이 모든 기기의 사이즈를 확인하면서 font-size를 다르게 주었다. 하지만 이 경우에도 최대한 많은 기기를 테스트했지만 약간씩의 오차가 있을 수 있다. 

html {
    @media (min-width: 1200px){ 
      font-size: 16px;
    }
    @media (min-width: 1000px){ 
      font-size: 16px;
    }
    @media (min-width: 931px) and (max-width:999px){ 
      font-size: 16px;
    }
    //Surface Pro 7
    @media (min-width: 901px) and (max-width:930px){ 
      font-size: 16px;
    }
    //
    @media (min-width: 831px) and (max-width:900px){ 
      font-size: 16px;
    }
    //iPad Air
    @media (min-width: 790px) and (max-width:830px){ 
      font-size: 16px;
    }
    //iPad Mini
    @media (min-width: 750px) and (max-width:789px){ 
      font-size: 16px;
    }
    @media (min-width: 600px) and (max-width:749px){ 
      font-size: 17.8px;
      @media (min-height: 740px) and (max-height: 999px){
            height: 80%!important;
      }
    }
    @media (min-width: 471px) and (max-width:580px){ 
      font-size: 17.8px;
    }
    //
    @media (min-width: 451px) and (max-width:470px){ 
      font-size: 16px;
    }
    //iPhone XR & Galaxy S20 Ultra & A51/71
    @media (min-width: 410px) and (max-width:450px){ 
      font-size: 15.4px;
    }
    //iPhone 12 Pro
    @media (min-width: 386px) and (max-width:409px){ 
      font-size: 14.7px;
     
    }
    //
    @media (min-width: 384px) and (max-width:385px){ 
      font-size: 14.2px;
    }
    //iPhone SE
    @media (min-width: 371px) and (max-width:383px){ 
      font-size: 13.95px;
   
    }
    @media (min-width:361px) and (max-width: 370px){
      font-size: 13.95px;
    }
    @media (min-width:331px) and (max-width: 361px){
      font-size: 13.4px;
   
    }
     //Galaxy S9+
    @media (min-width:301px) and (max-width:330px){
      font-size: 11.9px;
   
    }
    //Galaxy Fold
    @media (min-width:251px) and (max-width: 300px){ 
      font-size:10.4px;
    }
    @media (max-width:250px){
      font-size:8.9px;
    }
}