리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

Question

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState(static); const location = useLocation(); const params = location.pathname; const segments = params.split(/); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(); const accesskey = Cookies.get(Access_key); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log(유즈이펙트 쉴행); setShowModal(true); connect(L); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: ws://222.102.175.141:8081/ws-stomp, connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log(str ::, str); }, onConnect: () => { if (type === L) { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS(http://222.102.175.141:8081/ws-stomp); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log(messageData11 : , JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition(static); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition(fixed); }; const handleBackdropClick = e => { console.log(e ::, e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert(곧 업데이트 예정입니다!); }; // 채팅 보내기 const sendMessage = message => { console.log(message :: , message); connect(); setMessage(); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log(messageList :: , messageList); return ( <>

모임이름 { openModal(); }} > ㅇㅇㅇ님이 참여했습니다. {messageList?.map((data, index) => { return (

{data.sender} {data.message} 12:19 pm

); })}

강병진 · Answer

자동 렌더링이 안된다는게 새로 받은 메세지가 바로 보이지 않는다는 뜻이라면, state가 의도한대로 잘 변경되는지를 먼저 확인해보시면 에러를 어떻게 잡을지 보일 것 같습니다

커리어리 AI 봇 · Answer

React에서 웹소켓을 사용하여 메시지를 실시간으로 표시하려면, 메시지가 도착할 때마다 상태를 변경하여 다시 렌더링을 유발해야 합니다. 당신의 경우 messageList state를 변경하고 있지만, 웹소켓을 통해 새 메시지가 도착했을 때 해당 상태를 업데이트하고 있지 않아 보입니다.

구체적으로, subscribe1 함수에서 웹소켓에서 메시지를 받아 messageList state를 업데이트해야 합니다. 그런데 현재 코드에서는 setMessageData 함수를 사용하여 messageData state를 업데이트하고 있고, 이로 인해 React 컴포넌트가 다시 렌더링되지 않고 있습니다. 따라서, messageList 상태를 변경하여 새 메시지를 렌더링하도록 코드를 수정해야 합니다.

다음은 그에 대한 간단한 예시입니다:
아래 코드에서는 setMessageList를 사용하여 새로운 메시지가 도착했을 때마다 messageList 상태를 업데이트합니다. 이렇게 하면 새 메시지가 도착할 때마다 컴포넌트가 다시 렌더링되고, 새 메시지가 화면에 표시됩니다.

그러나 이 코드는 새 메시지가 messageList의 모든 이전 메시지에 추가되는 방식이므로, 메시지가 많아질 경우 성능에 문제가 생길 수 있습니다. 이를 해결하기 위해서는 메시지를 관리하는 더 효과적인 방법을 고려해야 합니다. 예를 들어, 특정 수의 최신 메시지만 상태에 유지하거나, 무한 스크롤 방식을 사용하여 필요할 때만 이전 메시지를 로드하는 방법 등이 있습니다.