문제 상황

현재 채팅 기능에서 새로운 메시지가 수신될 때

1. 사용자가 채팅의 상단(이전 채팅 기록)을 보고 있다면 → 계속 상단에 위치
2. 사용자가 채팅의 최하단(최신 채팅 기록)을 보고 있다면 → 계속 하단으로 이동 (새로운 메시지가 수신되면 스크롤을 아래로 이동시켜 최신 채팅이 가장 아래에 위치하도록)

위의 동작을 수행한다.

이에 따라, 현재 사용자가 스크롤 할 때 스크롤의 위치를 알고 있을 필요가 있었다.

사용자의 스크롤이 현재 어떤 위치에 있는지 파악하기 위해 onScroll이벤트를 활용했으며 이벤트 발생에 따라 스크롤이 된 비율을 state로 관리하게 되었다.

const handleScroll = () => {
  if (!messageAreaRef.current) return;
  const { scrollTop, clientHeight, scrollHeight } = messageAreaRef.current;

  setScrollRatio(((scrollTop + clientHeight) / scrollHeight) * 100);
};

위 코드의 문제는 사용자가 스크롤 할 때 마다 이벤트가 매우 자주 발생하는 것이다.

사진에서 볼 수 있듯 스크롤을 하는 과정에서 매우 많은 이벤트가 발생하는 것을 볼 수 있다.

성능 저하가 우려되는 상황이므로 다른 방법이 필요했다.

디바운싱

<aside> 💡 연속으로 호출되는 함수들 중 마지막에 호출되는 함수(또는 제일 처음 함수)만 실행되도록 하는 것

</aside>

디바운싱은 화면의 resize 등에서 활용할 수 있다.

resize에 따라 수행되는 로직이 있다면 화면이 resize되는 동안 이벤트가 계속해서 발생하고 이는 성능 저하를 일으킬 수 있다.

따라서, 이벤트가 계속해서 실행되지 않도록 설정해줄 필요가 있다.