[리액트] 소켓 비우고 다시 연결(stompjs 중첩 연결 해결)

문제 발생

useEffect(() => {
	client.connet({}, () => {
    	... 연결 내용 ...
    });
}, [chatroomId]);

구조는 다음과 같다.

채팅방 아이디가 바뀌면 useEffect을 실행시켜 연결을 다시 진행하여 채팅내역을 그려주는 방식이다.

하지만 채팅방이 바뀔때마다 연결이 중첩되어 같은 방을 n번 누르면 메시지를 n번 받는 버그가 발생한 것이다.

 

구상

1. 연결 상태에 따라 연결을 새로하고 안하고 한다. => 가능은 하지만 메모리 낭비가 심하고 코드가 길어진다.

2. client 를 전역변수로 빼본다 => 해당 client가 연결을 지속하고 있어 새로운 연결을 받지 않는다.

3. 웹소캣 내역을 지우고 다시 그려준다 => 이걸로 해결

 

 

해결 내용

useEffect(() => {
	client.connet({}, () => {
    	... 연결 내용 ...
    });
   return async () => {
   await client.disconnect();
  };
}, [chatroomId]);

return에 client 연결을 해제하는 코드를 추가하여 해결할 수 있었다.

 

useEffect에서 return

해당 effect가 더이상 실행할 필요가 없을 때 청소하는 용도이다.

다시말해 return을 하여 연결을 끊고 내용을 청소 한 다음 다시 연결하는 구조로 문제를 해결한 것이다.