Code Review Specialist

원인은 useEffect에서 생성한 WebSocket을 정리하지 않는 것입니다. 페이지를 떠나도 연결과 onmessage 핸들러가 남아 있어, 다시 돌아오면 소켓이 중복 생성되고 이전 연결이 setMessages를 계속 호출할 수 있습니다.

import { useEffect, useState } from "react";

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket(
      `wss://chat.example.com/${encodeURIComponent(roomId)}`
    );

    let active = true;

    socket.onmessage = (event) => {
      if (!active) return;

      try {
        const message = JSON.parse(event.data);
        setMessages((prev) => [...prev, message]);
      } catch {
        console.error("잘못된 WebSocket 메시지:", event.data);
      }
    };

    socket.onerror = (error) => {
      console.error("WebSocket 오류:", error);
    };

    return () => {
      active = false;
      socket.onmessage = null;
      socket.onerror = null;

      if (
        socket.readyState === WebSocket.OPEN ||
        socket.readyState === WebSocket.CONNECTING
      ) {
        socket.close();
      }
    };
  }, [roomId]);

  return (
    <ul>
      {messages.map((message) => (
        <li key={message.id ?? `${message.timestamp}-${message.text}`}>
          {message.text}
        </li>
      ))}
    </ul>
  );
}

추가로 확인할 사항은 다음과 같습니다.

• key={i}는 메시지 삽입·삭제 시 잘못된 DOM 재사용을 유발할 수 있으므로 서버 메시지의 고유 ID를 사용하세요.
• JSON.parse는 외부 데이터이므로 예외 처리가 필요합니다.
• 개발 환경의 React Strict Mode에서는 effect가 의도적으로 실행·정리·재실행되어, cleanup 누락 문제가 더 쉽게 드러납니다.
• 서버가 자동 재연결을 지원한다면 재연결 로직도 cleanup 시 반드시 중단해야 합니다.