[React] 모바일에서 100vh 맞추기

 

 

 

웹 기준 100vh와 모바일웹 기준 100vh는 조금의 차이를 가지고 있다. 모바일웹은 상단바와 하단바를 포함하여 100vh를 계산하기 때문에, 만일 높이를 100vh로 설정한 컴포넌트가 있다면 아래위 부분이 조금 가려질 수 있다.

 

이럴 경우 현재 기기의 화면을 계산해서 vh를 설정해주면 된다. 이렇게 할 경우 input을 눌렀을 때, 키보드가 나타나 윗화면을 볼 수 없게 되는 일이 발생하지 않는다. 나는 CRA를 사용했기 때문에 아래와 같은 방법을 사용했다. (CRA, 즉 creat-react-app을 사용했을 때는 아래 코드를 복사해서 설정하면 완료된다.)

 

 

 

App.js에 추가

 

function setScreenSize() {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  }

  useEffect(() => {
    setScreenSize();
  });

 

 

height: 100vh를 사용하는 css를 다음으로 수정

 

 height: calc(var(--vh, 1vh) * 100);