[Project] 웹소켓 이용한 채팅 구현

이번주엔 Sockjs와 stomp를 이용한 실시간 채팅을 구현하는 중이다...
많은 예시 코드를 봤지만 정말이해하기 힘들고 어느정도 구현이 완료된 현시점에서도 코드를 100% 이해하지 못하고있다^^ 머리아픔...

프론트 깃헙 리포
https://github.com/Line-Clone/Line_clone_front

Chat.jsx

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import SockJS from "sockjs-client";
import Stomp from "stompjs";
import { useParams } from "react-router-dom";

function Chat() {
  let SockJs = new SockJS("http://sangt.shop/ws/chat");
  let ws = Stomp.over(SockJs);
  let reconnect = 0;
  const param = useParams();
  const rommId = param.id;
  const sender = localStorage.getItem("wschat.nick");
  const [message, setMessage] = useState("");
  const messages = [];
  const [viewMessages, setViewMessages] = useState([]);
  function sendMessage() {
    ws.send(
      "/app/chat/message",
      {},
      JSON.stringify({
        type: "TALK",
        roomId: rommId,
        sender: sender,
        message: message,
      })
    );
  }

  function roomSubscribe() {
    ws.connect(
      {},
      function (frame) {
        ws.subscribe(`/topic/chat/room/${rommId}`, function (response) {
          const recv = JSON.parse(response.body);
          messages.push(recv);
          setViewMessages(messages);
        });
        ws.send(
          "/app/chat/message",
          {},
          JSON.stringify({
            type: "ENTER",
            roomId: rommId,
            sender: sender,
          })
        );
      },
      function (error) {
        if (reconnect++ <= 5) {
          setTimeout(function () {
            SockJs = new SockJS("http://sangt.shop/ws/chat");
            ws = Stomp.over(SockJs);
            roomSubscribe();
          }, 10 * 1000);
        }
      }
    );
  }
  //   console.log("msgs", messages);

  useEffect(() => {
    roomSubscribe();
  }, []);

  return (
    <StTopContainer>
      <StBorder>
        <StChatBorder>
          {viewMessages?.map((item) => {
            return <div>{item.message}</div>;
          })}
        </StChatBorder>
        <hr></hr>
        <StBottomBorder>
          <div>
            <input
              type="text"
              value={message}
              onChange={(event) => {
                setMessage(event.target.value);
              }}
</input>
          </div>
          <div>
            <button
              type="button"
              onClick={() => {
                sendMessage();
                setMessage("");
              }}

              전송
            </button>
          </div>
        </StBottomBorder>
      </StBorder>
    </StTopContainer>
  );
}

export default Chat;

현시점 까지 문제는 채팅방에 입장 후 실시간으로 타 사용자의 메세지는 받아와 지지만 내가 채팅을 입력하기 전까지 화면이 리렌더링이 되지 않는 것....
빠른 시일내에 수정 예정입니당 ...