React에서 resize

반응형으로 만들기 위해 화면 사이즈가 변경될 때마다 width값이 필요했고

resize 이벤트리스너를 이용했다.

window.addEventListener('resize', ...)

 

 

1. 초기값(사이즈 변경 전)을 세팅해준다.

 const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

 

2. useEffect에서 마운트 시 resize 이벤트 리스너를 넣어주고 언마운트 시 이벤트 리스너를 제거해준다. 여기서 제거해주지 않으면 메모리 소모가 많아지고 리렌더 시 이벤트 리스너 중복으로 인한 버그가 생길 수 있다.

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

화면 사이즈 변경 시 handleResize 함수가 실행된다.

 

 handleResize 함수에서는 width와 height값을 새로 변경된 값으로 업데이트해준다.

  const handleResize = () => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  };

 

끝!!

 

전체 소스는 다음과 같다.

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

const Component = (props) => {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const handleResize = () => {
    setSize({ width: window.innerWidth, height: window.innerHeight });
  };

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

  return (
    <>
      <h1>width:{size.width}</h1>
      <h1>height:{size.height}</h1>
    </>
  );
};
export default Component;