[코드 스테이츠 / Final-Project] 145일차, "라우팅 되면 완전히 연결 끊어버리기"

로그아웃일 때만 해주지 않고 현재 페이지를 벗어날 때 소켓 연결을 끊기

  소켓 아이디가 중복으로 계속 생성되는 문제를 방지하기 위해서 내가 했던 작업은 만약, 유저가 로그아웃을 누르게 될 경우 연결을 disconnect 옵션을 통해 끊어버리도록 코드를 작성했다. 하지만, 이렇게 하니 문제점이 하나가 더 있었다. 네비게이션 바를 이용해 채팅 페이지가 아닌 다른 페이지로 넘어갔다가 다시 들어오는 경우, 또 중복해서 소켓 아이디가 생성된다는 점이었다.

 

  이를 해결하기 위한 방법으로 가장 먼저 생각했던 것은, 너무나도 무식한 방법이었다.  지금 우리 코드 상에서 NavBar 는 app.jsx 에 있는데 여기 app.jsx 에 있는 navBar 컴포넌트를 '/chat' 일 때는 나타나지 않게 하고 chattingpage.jsx 에서 navBar 컴포넌트를 가져오고 props 를 생성하여 다른 페이지로 넘어가는 버튼을 눌렀을 때 disconnect 가 실행되도록 하는 함수를 작성하는 것이었다. 좀 너무 하드한 방법이었다. 이렇게 되면 문제점은 SPA 인 리액트지만 '/chat' 에서는 굳이 새롭게 렌더링 하지 않아도 되는 컴포넌트(navBar)가 있음에도 불구하고 완전히 새롭게 페이지를 렌더링 해야한다는 점이다. 

 

  조금 더 스마트한 방법이 없을까 고민했는데, 번뜩였던 게 이전 SVG 태그를 사용하면서 발생했던 에러를 해결했던 경험이었다. 이전에 SVG 태그를 useRef 로 참조하고 있었을 때 다른 페이지로 넘어가면 에러가 발생하는 현상이 있었다. 그 문제를 해결하기 위해서 처음에는 document 로 직접 DOM 에 접근을 했었는데, 이후 리팩토링하는 과정에서 useEffect cleanup 함수를 이용해 useRef 와 SVG 사이의 연결을 끊어버리는 로직을 작성하도록 만들어 에러를 해결했었다. socketRef, 이것도 마찬가지로 useRef 를 활용한 것이다. 설마 해서 cleanup 함수에 연결을 끊는 로직을 작성하니, 원하는대로 다른 페이지로 넘어가게 되면 연결은 끊었다.

 

  아, 이제서야 이 에러가 진짜 완전히 끝난 것 같다 ㅠㅠㅠㅠㅠㅠ

 

 

로그아웃 했을 때만 주었다

socketRef.current 를 사용하는 모든 곳에 다 cleanUp 함수를 사용했다