아래로 항상 스크롤

메시지 창을 구현하면 항상 아래로 가야할 때가 있다

useRef로 구현가능하다.

LiveChat.js

import { useEffect, useState, useRef } from "react"

export function LiveChat() {
    const [chatList, setChatList] = useState([]);
    const messageEndRef = useRef(null);
    
    useEffect(() => {
        messageEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }, [chatList]);
    
    return (
    	<div className = "chatList">
        	{chatList...}
        	<div ref={messageEndRef}></div>
        </div>
    
    )
    
}

이런식으로 ref를 마지막에 줌으로써 해결가능하다