[React] 동적 화면 사이즈 구하기 -addEventListener("resize", resizeListener)

import React, { useState, useEffect } from 'react';

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

  const resizeListener = () => {
    setInnerWidth(window.innerWidth);
  };

  useEffect(() => {
    window.addEventListener("resize", resizeListener);

    return () => {
      window.removeEventListener("resize", resizeListener);
    };
  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 설정

  console.log("innerWidth", innerWidth);

  return (
    // 여기에 컴포넌트의 나머지 렌더링 로직을 추가할 수 있습니다.
  );
};

export default ResizeListenerComponent;

• useEffect 훅 내에서 이벤트 리스너를 등록할 때, 해당 이벤트 리스너를 제거하는 cleanup 함수를 추가하였습니다. 이는 컴포넌트가 언마운트될 때 이벤트 리스너가 정리되도록 보장합니다.