[코드 스테이츠 / Final-Project] 146일차, "이전의 에러 해결은 잘못된 방법이었다"

 

밑의 에러가 해결한 후의 모습. 너무나 감격적이었다

같은 socket.id 로 다른 룸에서 전달되는 메시지를 안 받을 수 있다

  내가 A 라는 유저라 하자. 이전에 발생했던 문제는 A 가 B와 채팅하는 방에서 C가 보내는 문자가 들어오는 것이었다. 이 문제를 해결하기 위해서 내가 썼던 방법은 socket 연결이 되는 방은 오직 A 가 현재 들어가 있는 채팅방으로 한정해놓는 것이다. 그러니까 다른 방으로 넘어가게 되면 이전 방과의 socket 연결을 끊어 버리고 새로 넘어가는 방만 socekt 연결을 한다. 이렇게 하니까 위에서 언급한 문제는 해결됐다. 

 

  하지만 이 에러 핸들링이 문제가 된 것은 내가 Advanced 로 기획했던 실시간으로 안 읽은 메시지 알림창을 띄울 때 발생했다. 실시간으로 채팅방에서 안 읽은 메시지를 띄우기 위해서는 socket 으로 연결돼 있어야 한다. 그러니까 내가 채팅하고 있는 방 이외의 다른 방과도 socket 으로 연결이 돼야 하는데 문제는 내가 그 연결을 끊어버렸다. 이 문제를 해결하기 위해서는 결국 이전의 에러 해결이라고 작성했던 그 로직을 다시 한 번 파기해야 했다. 그리고 나서 쓴 방법은 다음의 방법이다. 너무나도 간단한 방법이었다. 화면에 표시할 메시지를 걸러주는 것을 클라이언트의 몫으로 넘겼는데, 클라이언트에서 관리하고 현재 내가 들어가 있는 방 아이디 state 값과 메세지를 전송받는 roomId 의 값이 동일하다면 채팅 내용을 띄우도록 로직을 작성했다.

 

useEffect 안에서 state 값을 참조할 수 없다?!

  나를 또 멘붕에 빠트린 일이었다. useEffect 안에서 state 값을 사용한다면 그 state 는 useEffect 가 실행됐을 때의 값으로 고정이 된다. 즉, state 값이 동적으로 바뀌더라도 useEffect 안에 있는 그 state 값은 useEffect 가 실행됐을 때의 값으로 밖에 사용할 수 없다. 그렇기 때문에 위에서 현재 내가 들어가 있는 방 아이디 state 값을 참조할 수 없다 보니 앞선 문단에서 서술한 에러를 해결할 수 없었다. 이 문제를 어떻게 해결해야할지 고민을 많이 했는데 useRef 를 사용하도록 했다. useEffect 의 종속성 배열로 currentRoom(내가 현재 들어가 있는 roomId) 의 값이 바뀔 때마다 currentRoomRef.current 에 그 변화된 값을 집어 넣었다. useEffect 안의 useRef 값은 current 값이 동적으로 변화하면 그 변화한 값을 가져올 수 있기 때문에 그 state 를 사용할 수 있었다.

 

  아 드디어 나를 엄청 힘들게 했던 에러 두 번째를 해결했다

에러가 발생하는 코드

currentRoomRef.current 는 현재 내가 어느 roomId 에 있는지를 나타낸다