Perf/#348-B: 불필요한 리렌더링 방지 (#349)

* perf: 불필요한 리렌더링 방지

Refactor: #348

* fix: CI 오류 해결

Resolve: #348

Author: dohun31

client/src/components/Workspace/index.tsx

@@ -1,7 +1,7 @@
 import { WORKSPACE_EVENT } from '@wabinar/constants/socket-message';
 import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { getWorkspaceInfo } from 'src/apis/workspace';
 import MeetingMediaBar from 'src/components/MeetingMediaBar';
@@ -56,11 +56,20 @@ function Workspace() {
     };
   }, [workspaceSocket]);
 
-  if (!momSocket || !workspaceSocket) return <></>;
+  const memoizedSocketValue = useMemo(
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    () => ({ momSocket: momSocket!, workspaceSocket: workspaceSocket! }),
+    [momSocket, workspaceSocket],
+  );
+
+  const memoizedOnGoingValue = useMemo(
+    () => ({ isOnGoing, setIsOnGoing }),
+    [isOnGoing],
+  );
 
   return (
-    <SocketContext.Provider value={{ momSocket, workspaceSocket }}>
-      <MeetingContext.Provider value={{ isOnGoing, setIsOnGoing }}>
+    <SocketContext.Provider value={memoizedSocketValue}>
+      <MeetingContext.Provider value={memoizedOnGoingValue}>
         {workspace && (
           <SelectedMomContext.Provider value={{ selectedMom, setSelectedMom }}>
             <Sidebar workspace={workspace} />