React로 채팅앱 구현 시 스크롤 맨 아래로 내리는 법

 

채팅창에서는 내가 메세지를 보낼 때마다, 또는 상대가 나에게 메세지를 보낼 때마다 스크롤이 맨 아래로 내려가게 만들고 싶었다. 

 

scrollIntoView

element.scrollIntoView()
scrollIntoView를 사용하면 element가 사용자에게 보여지도록 스크롤이 된다

 

 

따라서 채팅 메시지 맨 밑에 빈 div를 만들어서 ref를 연결해준 뒤, useEffect에서 chatData 상태가 변할 때마다 위의 빈 div로 스크롤해준다.

const msgBottom = useRef < HTMLDivElement > null;

useEffect(() => {
  if (msgBottom && msgBottom.current) {
    msgBottom.current.scrollIntoView({ behavior: 'smooth' });
  }
}, [chatData]);

<div>
  {chatData?.map((data) => (
    <div>{data.text}</div>
  ))}
  <div ref={msgBottom} />
</div>;

 

 

이렇게 하면 새로운 메시지를 보내거나 받을때 채팅창이 맨 아래쪽으로 스크롤링 된다!