[Team Project] Bid Panda ep.9

✶ 항해99 16기 3조
팀 프로젝트 Bid Panda의 FE 개발일지

Issue ▸

채팅룸에서 메시지를 주고 받으며 스크롤을 수동으로 내려야만 최신 메시지들을 확인할 수 있는 어처구니 없는 상황이었다.

Solve :

useRef로 화면 하단을 정의 해준 뒤,

messagesEndRef.current.scrollIntoView()

를 사용하여 최신 데이터 삽입 시 자동으로 스크롤 다운 할 수 있게 조치했다.

  const messagesEndRef = useRef<any>(null);

// 메시지가 추가될 때마다 스크롤을 아래로 이동
  useEffect(() => {
    scrollToBottom();
  }, [history]);

  const scrollToBottom = () => {
    messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
  };