Refactor/#182-B: 회의록 선택시 불필요한 리렌더링 방지

client/src/components/Sidebar/ConfButton.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
 import { useConfContext } from 'src/hooks/useConfContext';
 import useSocketContext from 'src/hooks/useSocketContext';
@@ -27,4 +28,4 @@ function ConfButton() {
   );
 }
 
-export default ConfButton;
+export default memo(ConfButton);

client/src/components/Sidebar/Header.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+
+import SettingIcon from './SettingIcon';
+import style from './style.module.scss';
+
+interface HeaderProps {
+  name: string;
+}
+
+function Header({ name }: HeaderProps) {
+  return (
+    <div className={style['header']}>
+      <h1>{name}</h1>
+      <SettingIcon />
+    </div>
+  );
+}
+
+export default memo(Header);

client/src/components/Sidebar/MemberList.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { TUser } from 'src/types/user';
 
 import style from './style.module.scss';
@@ -19,4 +20,4 @@ function MemberList({ members }: MemberListProps) {
   );
 }
 
-export default MemberList;
+export default memo(MemberList);

client/src/components/Sidebar/MomList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, memo  } from 'react';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
 import useMom from 'src/hooks/useSelectedMom';
 import useSocketContext from 'src/hooks/useSocketContext';
@@ -8,10 +8,10 @@ import style from './style.module.scss';
 
 interface MomListProps {
   moms: TMom[];
+  setSelectedMom: React.Dispatch<React.SetStateAction<TMom | null>>;
 }
 
-function MomList({ moms }: MomListProps) {
-  const { selectedMom, setSelectedMom } = useMom();
+function MomList({ moms, setSelectedMom }: MomListProps) {
   const { momSocket: socket } = useSocketContext();
   const [momList, setMomList] = useState<TMom[]>(moms);
 
@@ -20,7 +20,6 @@ function MomList({ moms }: MomListProps) {
   };
 
   const onSelect = (targetId: string) => {
-    if (selectedMom && selectedMom._id === targetId) return;
     socket.emit(SOCKET_MESSAGE.MOM.SELECT, targetId);
   };
 
@@ -56,4 +55,4 @@ function MomList({ moms }: MomListProps) {
   );
 }
 
-export default MomList;
+export default memo(MomList);

client/src/components/Sidebar/index.tsx

@@ -1,24 +1,23 @@
+import useSelectedMom from 'src/hooks/useSelectedMom';
 import { WorkspaceInfo } from 'src/types/workspace';
 
 import ConfButton from './ConfButton';
+import Header from './Header';
 import MemberList from './MemberList';
 import MomList from './MomList';
-import SettingIcon from './SettingIcon';
 import style from './style.module.scss';
-
 interface SidebarProps {
   workspace: WorkspaceInfo;
 }
 
 function Sidebar({ workspace }: SidebarProps) {
+  const { setSelectedMom } = useSelectedMom();
+
   return (
     <div className={style['sidebar-container']}>
-      <div className={style['header']}>
-        <h1>{workspace.name}</h1>
-        <SettingIcon />
-      </div>
+      <Header name={workspace.name} />
       <MemberList members={workspace.members} />
-      <MomList moms={workspace.moms} />
+      <MomList moms={workspace.moms} setSelectedMom={setSelectedMom} />
       <ConfButton />
     </div>
   );

client/src/hooks/useSelectedMom.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { SelectedMomContext } from 'src/contexts/selected-mom';
 
-export default function useMom() {
+export default function useSelectedMom() {
   const context = useContext(SelectedMomContext);
 
   if (!context) throw new Error('아니요. 없어요.');