diff --git a/client/src/components/Sidebar/ConfButton.tsx b/client/src/components/Sidebar/ConfButton.tsx
index f6186d4f..ad86d924 100644
--- a/client/src/components/Sidebar/ConfButton.tsx
+++ 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);
diff --git a/client/src/components/Sidebar/Header.tsx b/client/src/components/Sidebar/Header.tsx
new file mode 100644
index 00000000..c088472d
--- /dev/null
+++ b/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 (
+
+
{name}
+
+
+ );
+}
+
+export default memo(Header);
diff --git a/client/src/components/Sidebar/MemberList.tsx b/client/src/components/Sidebar/MemberList.tsx
index e2983b9b..51cde298 100644
--- a/client/src/components/Sidebar/MemberList.tsx
+++ b/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);
diff --git a/client/src/components/Sidebar/MomList.tsx b/client/src/components/Sidebar/MomList.tsx
index beb58959..d4f1dead 100644
--- a/client/src/components/Sidebar/MomList.tsx
+++ b/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>;
}
-function MomList({ moms }: MomListProps) {
- const { selectedMom, setSelectedMom } = useMom();
+function MomList({ moms, setSelectedMom }: MomListProps) {
const { momSocket: socket } = useSocketContext();
const [momList, setMomList] = useState(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);
diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx
index 137d2fec..91dd940a 100644
--- a/client/src/components/Sidebar/index.tsx
+++ b/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 (
-
-
{workspace.name}
-
-
+
-
+
);
diff --git a/client/src/hooks/useSelectedMom.ts b/client/src/hooks/useSelectedMom.ts
index 19bb58e7..7d050920 100644
--- a/client/src/hooks/useSelectedMom.ts
+++ b/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('아니요. 없어요.');