[React] resize 이벤트 다루기

+ 2022.07.13 추가
댓글을 무시할까 하다가 아무래도 나의 작고 다 쓰러져가는 구멍가게 같은 블로그에 이런 의견이 들어오는 일이 또 있을까 싶어 늦게라도 피드백을 남겨본다.
먼저 이 글은 티스토리에 등록한 시점보다 훨씬 이전에 쓴 글이다. 그 당시 구글링을 통해서 나도 처음 알게 된 내용이고, 너무 유익했기 때문에 공유해야겠다는 마음으로 글을 쓰기 시작했다. 시간이 꽤 지났지만 분명히 기억나는 건 외국 글을 토씨하나 안 틀리고 그대로 베껴 번역한 게 아니라 최대한 나의 언어로 정리하고 소스도 직접 테스트 해보고 내 방식 대로 수정했다는 것이다(이게 더 나쁜 걸까?ㅠㅠ). 그래서 이번에 혹시나 원글을 찾아봤는데 정확히 일치하는 글을 찾지 못했다..😥 하지만 얼추 가장 비슷해보이고 나도 낯이 가장 익은 글을 출처로 첨부했다. (정 문제가 된다면 글을 내리겠음!) 앞으로는 같은 실수를 반복하지 않겠다. 출처..유의.. 메모메모...

그리고 텍스트 복사는 곰곰히 생각해보니 나도 개발하면서 종종 다른 글에서 예제 소스를 긁어와 활용하고 있기 때문에 드래그 할 수 있도록 풀어뒀다👍
(불편함이 조금이나마 해소됐길 바라며, 댓글은 흥미진진하니까 삭제하지 않는 걸로~)

---

✨ Window Resize

브라우저 화면 사이즈가 변경될 때, 변경된 사이즈 값을 리액트 컴포넌트에 적용할 수 있는 방법이 있다. 바로 window 객체에 발생되는 resize 이벤트를 감지하고, 그 때마다 컴포넌트의 state에 사이즈 값을 저장해 리렌더하는 것이다.

1. 이벤트 리스너 처리

useEffect에 빈 배열을 전달하면, 컴포넌트가 처음 마운트 될 때와 언마운트 될 때만 실행된다. 이를 통해 컴포넌트가 마운트될 때 이벤트 리스너를 더하고, 언마운트 될 때 제거해준다.

⚡ 중요

이벤트 리스너를 제거하지 않으면, 컴포넌트가 리렌더되어 useEffect가 실행될 때마다 새로운 이벤트 리스너가 핸들러에 바인딩될 것이다. 컴포넌트가 자주 리렌더될 경우에는, 이로 인해 심각한 메모리 누수가 발생할 수 있다. 따라서 리렌더된 후, 새로운 리스너가 생기기 이전에 기존의 리스너를 제거해줘야 한다.

import React, { useEffect } from 'react';

const ResizedComponent = () => {
  const handleResize = () => {
    console.log(`브라우저 화면 사이즈 x: ${window.innerWidth}, y: ${window.innerHeight}`);
  }

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

  return <div>브라우저 화면 사이즈 x: {window.innerWidth}, y: {window.innerHeight}</div>
}

2. 컴포넌트 리렌더

브라우저 화면 사이즈를 줄이고 늘릴 때마다 콘솔에 변경되는 사이즈가 잘 뜬다면 성공이다! resize 이벤트가 발생할 때마다 handleResize 내부의 코드가 잘 실행되고 있다는 뜻이다. 하지만 아무리 handleResize 함수가 호출되어도 <div>에 출력되는 사이즈는 바뀌지 않는다. 컴포넌트가 리렌더 되지 않고 있기 때문이다.

리액트의 기본적인 원리(state나 props가 변하면 컴포넌트도 리렌더 되는 점)를 이용해서 문제를 해결할 수 있다. 화면 사이즈를 컴포넌트 내부의 state로 관리함으로써 이벤트 핸들러가 호출될 때마다 컴포넌트한테 "화면 사이즈 바뀌었으니까 너도 리렌더 해!" 라고 알려주는 것이다.

아래처럼 useState을 사용해 windowSize 라는 state를 추가하고, handleResize 안에서 state가 업데이트 되도록 한다. 그럼 화면 사이즈가 바뀔 때마다 <div>에 출력되는 사이즈도 함께 변경될 것이다.

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

const ResizedComponent = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

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

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

  return <div>브라우저 화면 사이즈 x: {window.width}, y: {window.height}</div>
}

3. 디바운스(Debounce)

우리는 이제 컴포넌트 내부에서 변경되는 브라우저 화면 사이즈를 감지해 원하는 작업을 할 수 있게 됐다. 여기서 한 가지, px 단위로 매번 이벤트 핸들러가 호출될 필요가 있을 지를 고려해보면 좋겠다. 필요 이상으로 잦은 리렌더는 성능상으로도 좋지 않을 것이며, 결국 내가 필요한 값은 맨 마지막에 결정된 사이즈 값 하나일테니까. 이럴 때는 debounce라는 기술을 이용해 리렌더의 횟수를 줄일 수 있다.

◽ 디바운스(Debounce)란
이벤트를 그룹화해 특정 시간이 지난 후, 하나의 이벤트만 발생하도록 하는 기술이다. 즉, 연이어 호출되는 함수들 중 마지막 혹은 제일 처음만 호출하도록 하는 것이다.

자세한 내용은 여기를 참고하길 추천...

lodash 패키지가 제공하는 debounce 함수를 사용해, handleResize 함수가 1초마다 호출될 수 있도록 적용해준다. (lodash 설치 부분은 패스💨). 그럼 더이상 px 단위로 리렌더 되지 않고, 1초마다 한 번씩 리렌더가 될 것이다.

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

const ResizedComponent = () => {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  // handleResize 함수를 debounce로 감싸고, 시간을 설정한다
  // 1000ms = 1sec
  const handleResize = debounce(() => {
    setWindowSize({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }, 1000);

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

  return <div>브라우저 화면 사이즈 x: {window.width}, y: {window.height}</div>
}

출처일지도 모르는 글(가장 유사): https://www.pluralsight.com/guides/re-render-react-component-on-window-resize