Refactor/#287-S : 소켓 상태 관리 리팩토링 - 다른 워크스페이스 접속 시 이전 연결 끊기 리팩토링 (#288)

* refactor : useSocket 소켓 관리 로직 변경
- socket을 ref로 관리
- useEffect 내에서 소켓을 할당하고, 언마운트 시에 disconnect 시킴

* chore : 소켓 조건문 early return 방식으로 변경

Co-authored-by: Seyoung Kim <[email protected]>

Author: juyeong-s

client/src/components/Workspace/index.tsx

@@ -2,7 +2,6 @@ import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { Socket } from 'socket.io-client';
 import { getWorkspaceInfo } from 'src/apis/workspace';
 import MeetingMediaBar from 'src/components/MeetingMediaBar';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
@@ -20,8 +19,8 @@ function Workspace() {
   const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
   const [selectedMom, setSelectedMom] = useState<TMom | null>(null);
 
-  const [momSocket, setMomSocket] = useState<Socket | null>(null);
-  const [workspaceSocket, setWorkspaceSocket] = useState<Socket | null>(null);
+  const momSocket = useSocket(`/sc-workspace/${id}`);
+  const workspaceSocket = useSocket(`/workspace/${id}`);
 
   const loadWorkspaceInfo = async () => {
     if (id) {
@@ -34,28 +33,8 @@ function Workspace() {
   };
 
   useEffect(() => {
-    setMomSocket((prev) => {
-      prev?.disconnect();
-      return useSocket(`/sc-workspace/${id}`);
-    });
-    setWorkspaceSocket((prev) => {
-      prev?.disconnect();
-      return useSocket(`/workspace/${id}`);
-    });
-
     loadWorkspaceInfo();
     setIsOnGoing(false);
-
-    return () => {
-      setMomSocket((prev) => {
-        prev?.disconnect();
-        return null;
-      });
-      setWorkspaceSocket((prev) => {
-        prev?.disconnect();
-        return null;
-      });
-    };
   }, [id]);
 
   useEffect(() => {
@@ -77,7 +56,9 @@ function Workspace() {
     };
   }, [workspaceSocket]);
 
-  return momSocket !== null && workspaceSocket !== null ? (
+  if (!momSocket || !workspaceSocket) return <></>;
+
+  return (
     <SocketContext.Provider value={{ momSocket, workspaceSocket }}>
       <MeetingContext.Provider value={{ isOnGoing, setIsOnGoing }}>
         {workspace && (
@@ -89,8 +70,6 @@ function Workspace() {
         {isOnGoing && <MeetingMediaBar />}
       </MeetingContext.Provider>
     </SocketContext.Provider>
-  ) : (
-    <></>
   );
 }
 

client/src/hooks/useSocket.ts

@@ -1,9 +1,24 @@
-import { io } from 'socket.io-client';
+import { useEffect, useRef } from 'react';
+import { io, Socket } from 'socket.io-client';
 import env from 'src/config';
 
 export default function useSocket(namespace: string) {
   // TODO: http://example.com/ 까지만 나타내는 환경변수로 SERVER_URL 사용.
   // SERVER_PATH 환경변수(http://example.com/api)와 겹치는 부분이 있으므로 리팩토링 필요
   // TODO: '/ws' 부분을 환경변수로 관리하기. 위 리팩토링 진행시 같이 진행 필요
-  return io(`${env.SERVER_URL}${namespace}`, { path: '/ws' });
+  const socket = useRef<Socket>();
+
+  useEffect(() => {
+    const ioSocket = io(`${env.SERVER_URL}${namespace}`, { path: '/ws' });
+    socket.current = ioSocket;
+
+    return () => {
+      if (socket.current) {
+        socket.current.disconnect();
+        socket.current = undefined;
+      }
+    };
+  }, [namespace]);
+
+  return socket.current;
 }