JEONG_LOG

const socket = io.connect("http://localhost:4000");

useEffect(() => {
        socket.on("receive chat", (message) => {
            setChatList((chatList) => chatList.concat(message));
            dispatch({
                type: "CHANGE_NAME",
                name: message.name
            });
        });
    }, []);

function ChatContentBox(){

    const messageBoxRef = useRef();
    const chatList = useChatList();
    
    const scrollToBottom = () => {
        if (messageBoxRef.current) {
          messageBoxRef.current.scrollTop = messageBoxRef.current.scrollHeight;
        }
      };

      useEffect(() => {
        scrollToBottom();
      }, [chatList]);

    return(
        <div className="chat-wrap">
            <div className="container">
                <div className="chat-content-box" ref={messageBoxRef}>
                    { chatList.map((el, index) => (
                        <div className="chat" key={index}>
                            <div className="chat-name">{el.name}</div>
                            <div className="chat-message">{el.message}</div>
                        </div>
                    ))
                    }
                </div>
            </div>
        </div>
    )
}