📌 문제 요약

웹 애플리케이션에서 Zustand와 STOMP WebSocket(Client)을 사용하여 WebSocket 연결을 관리하는 중, 불필요한 중복 연결과 자동 재연결 문제가 발생했습니다.

이를 해결하기 위해 reconnectDelay: 0 설정과 useEffect의 실행 조건을 조정하여 웹소켓 연결을 안정적으로 유지하면서 중복 연결을 방지하는 방법을 적용했습니다.

🛠️ 발생한 문제

1️⃣ WebSocket이 계속해서 자동 재연결됨

• STOMP.js의 기본 설정에서 reconnectDelay: 5000이 활성화되어 있었음.
• 이 설정으로 인해 WebSocket이 닫힐 경우 5초마다 자동으로 재연결되었음.
• WebSocket이 정상적으로 유지되는 상황에서도 불필요한 재연결 요청이 발생하여 중복 연결이 생김.

2️⃣ Home 페이지에서 useEffect가 불필요하게 여러 번 실행됨

• useEffect(() => { connectWebSocket(); }, [connectWebSocket]); 사용 시,connectWebSocket의 참조가 변경될 가능성이 있어 불필요한 실행이 발생할 수 있음.
• WebSocket이 이미 연결되어 있어도 useEffect가 실행될 때마다 connectWebSocket이 호출될 위험이 있음.

3️⃣ 다른 페이지로 이동하면 WebSocket이 끊어지는 문제

• useEffect의 cleanup 함수에서 disconnectWebSocket()을 호출하면,Home 페이지를 벗어날 때 WebSocket 연결이 끊어져 다른 페이지에서도 유지할 수 없었음.

🔍 원인 분석

1️⃣ reconnectDelay: 5000으로 인해 자동 재연결 발생

• STOMP 클라이언트가 자동으로 재연결을 시도하면서 불필요한 연결이 계속 발생함.