Viewport width/height

화면 크기에 따라서 이벤트를 걸어주고 싶다.

react에서도 window 객체를 사용해서 visualViewport.Width/height값을 가져온다.

아래는

window.visualViewport의 return 값

height: 920
offsetLeft: 0
offsetTop: 0
onresize: null
onscroll: null
pageLeft: 0
pageTop: 903
scale: 1
width: 1394

어랏 innerWidth/height도 있다.
차이점은...?

window.innerWidth 
window.innerHeight 

다른내용은 정리잘된 블로그를 참고하길...
간단히 정리하면

innerWidth : scroll bar를 포함한 화면영역

visualViewport.width: scroll bar를 제외한 화면영역

값은 얻어왔다.
그럼 화면크기 변화는 어떻게 감지할가?
addEventListener('resize' , ()=>{}) 를 사용해서 이벤트를 걸어준다.

아래는 React에서 사용할 때 예제이다.

  const [innerWidth, setInnerWidth] = useState(window.innerWidth);

  useEffect(() => {
    const resizeListener = () => {
      setInnerWidth(window.innerWidth);
    };
    window.addEventListener("resize", resizeListener);
  });

  console.log("innerWidth", innerWidth);