모바일에서 100vh를 사용하지 못하는 이유

/* Element의 전체 높이 */
.my-div-name {
height: 100vh; /* fill-available 자체가 없을 때 사용 가능 */
height: -moz-available; /* 파이어폭스에서 사용 가능 */
height: -webkit-fill-available; /* 웹킷 기반 브라우저에서 사용 가능 */
height: fill-available;
}

// Hooks
import { useState, useEffect } from "react";

export const useWindowSize = () => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);

useEffect(() => {
const setWindowSize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}

window.addEventListener("resize", setWindowSize);

return () => {
window.removeEventListener("resize", setWindowSize);
}
},[])

return {
width,
height
}
}

// Render
// 보다 직관적인 예시를 위해 styled-components에 적용하는 예시로 작성됨
import React from "react";
import { useWindowSize } from "./useWindowSize"; // 경로는 직접 지정하면 됩니다.
import styled from "styled-components"

const Wrapper = styled.div`
width: 100%;
${props => props.height ? `height: ${props.height}px;` : ""}
`

const App = () => {
const { height } = useWindowSize();

return(
<Wrapper height={height}>
// Your Children
</Wrapper>
)
}

export default App;

// Hooks
/*
 * window객체가 없으면 state들은 모두 0으로 지정하고
 * useEffect는 상단 return에 의해 아래 함수가 실행 되기 전 취소가 되는 로직이다.
 */
import { useState, useEffect } from "react";

export const useWindowSize = () => {
const isBrowser = typeof window !== "undefined"; // 변경됨
const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0); // 변경됨
const [height, setHeight] = useState(isBrowser ? window.innerHeight : 0); // 변경됨

useEffect(() => {
if (!isBrowser) return; // 변경됨

const setWindowSize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}

window.addEventListener("resize", setWindowSize);

return () => {
window.removeEventListener("resize", setWindowSize);
}
},[isBrowser]) // 변경됨

 {
width,
height
}
}

// Hooks
/*
 * window객체가 없으면 state들은 모두 0으로 지정하고
 * useEffect는 상단 return에 의해 아래 함수가 실행 되기 전 취소가 되는 로직이다.
 */

import { useState, useEffect } from "react"

export const useWindowSize = () => {
const isBrowser = typeof window !== "undefined" *// 변경됨*
const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0) *// 변경됨*
const [height, setHeight] = useState(isBrowser ? window.innerHeight : 0) *// 변경됨*

useEffect(() => {
if (!isBrowser) return // 변경됨

const setWindowSize = () => {
setWidth(window.innerWidth)
setHeight(window.innerHeight)
}

window.addEventListener("resize", setWindowSize)

return () => {
window.removeEventListener("resize", setWindowSize)
}
}, [isBrowser]) *// 변경됨*

 {
width,
height,
}
}