[useRef] 채팅 입력시 최신항목으로 스크롤 이동하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이와같이, 채팅을 입력했을때 수동으로 스크롤을 해줘야하는 불편함이 있었다.

 

"use client";

import { useEffect, useRef } from "react";

function MessageList({ messageList }) {
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messageList]);

  return (
    <div className="overflow-scroll scrollbar-hide" ref={scrollRef}>
      {messageList.map((message) => {
        return (
         <div>메시지</div>
        );
      })}
    </div>
  );
}

export default MessageList;

채팅영역에 useRef를 주고, useEffect의 dependency인 messageList값이 추가될때마다, 자동으로스크롤을 내려준다.

 

scrollTop 속성을 scrollHeight 속성 값으로 설정하는데, scrollTop은 요소의 수직 스크롤 위치를 나타내며, scrollHeight는 요소의 전체 내용 높이를 포함한다.

👉🏻 스크롤 위치를 요소의 가장 아래로 설정하여 최신 내용을 사용자에게 보여주게 되는것이다.

 

 

완성✨