React 모바일웹 화면 딱맞게 구현

1. App.js에 코드 작성

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

사용자가 접속할 때 이 함수가 사용자의 뷰포트 높이를 계산하고, 그 값을 --vh라는 css 변수에 저장해준다.

 

1) window.innerHeight * 0.01;

=> 현재 브라우저의 뷰포트 높이 X 0.01 = 뷰높이의 1%

 

왜 1%를 알아야합니까?

주로 모바일 기기에서 발생하는 주소 표시줄과 같은 상단의 브라우저 ui영역이나 하단의 내비게이션 바와 같은 ui 영역 때문

그 영역이 무조건 1% 입니까?

아니다. 일반적으로 사용되는 근사치 중 하나다.

2) document.documentElement.style.setProperty("--vh", `${vh}px`)

=> 변수를 설정하는 코드, --vh는 변수 이름

 

2. css 최상위 파일에 코드 추가

:root {
       --vh: 100%;
   }

 

3. 필요한 곳에 가지고 와서 사용

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

 

3. 만약 Footer가 있다!?

height: calc(var(--vh, 1vh) * 100 + [footer의 높이]);

// 예: footer 높이가 66px인 경우
height: calc(var(--vh, 1vh) * 100 + 66px);

 

푸터 높이를 추가해주시면 됩니다.