useEffect cleanup 누락

채팅방을 전환할 때 이전 방의 메시지도 계속 수신됩니다. 버그를 찾으세요:

JSX

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

  useEffect(() => {
    const socket = connectToRoom(roomId);
    socket.on('message', (msg) => {
      setMessages(prev => [...prev, msg]);
    });
  }, [roomId]);

  return (
    <div>
      {messages.map((msg, i) => <p key={i}>{msg}</p>)}
    </div>
  );
}

답변

setMessages에 함수형 업데이트를 쓰면 안 됨 socket.on 대신 socket.addEventListener를 써야 함 useEffect에서 소켓 연결 해제(cleanup 함수)를 반환하지 않음 roomId가 변경될 때 messages를 초기화하지 않아서

로그인 후 제출하기