[React] innerHeight로 전체화면 맞추기

웹에서 필수적으로 필요한건 화면 크기 맞추기라고 생각한다!
기기마다 화면 크기도 다르고,

모바일 웹과 PC 웹에서 모두 전체화면을 유지해야하기 때문에
화면 크기에 따라서 보여지는 크기도 달라져야 한다.

여러 방법들을 시도해보았고,
직접 사용한 방법을 포스팅해보고자 한다.

컴포넌트들의 크기와 위치는 rem 단위로 맞추는 것을 선호하기 때문에
최상위 스타일에서의 font-size를 바꿔줘야 한다.

스타일 적용은 styled-components를 사용하였다.

전체적인 흐름은 아래와 같다.

1. index.js에서 window의 innerHeight 구하기
2. 1에서 구한 값을 전역 스타일에 props로 넘겨주기
3. 넘겨 받은 값으로 전역 스타일 적용하기

index.js

import App from "./App";
import GlobalStyle from "./styles/GlobalStyle";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
    <GlobalStyle height={window.innerHeight * 0.01} />  
  </React.StrictMode>
);

보다시피 전역 스타일에 props을 넘겨주는 것을 볼 수 있다.

GlobalStyle.js

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	html{
		font-size: ${props => `${props.height / 84.4 * 100}px`};
	}
`

index.js에서 받은 innerHeight로 font-size를 설정한다.
다른 페이지들을 작성할 때 모든 Wrapper의 높이를 84.4rem 으로 설정해주었기 때문에 위 코드처럼 / 84.4 * 100 이 붙은건데, Wrapper의 높이를 100rem으로 설정해준다면

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	html{
		font-size: ${props => `${props.height}px`};
	}
`

이런 식으로만 해줘도 된다.