From 9c6f62d4236c05e880fd7912ff91b9c7cc915017 Mon Sep 17 00:00:00 2001 From: dohun Date: Thu, 1 Dec 2022 19:48:31 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=EB=B3=80=ED=95=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20mem?= =?UTF-8?q?oization?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Resolve: #182 --- client/src/components/Sidebar/ConfButton.tsx | 3 ++- client/src/components/Sidebar/Header.tsx | 19 +++++++++++++++++++ client/src/components/Sidebar/MemberList.tsx | 3 ++- client/src/components/Sidebar/MomList.tsx | 7 +++---- client/src/components/Sidebar/index.tsx | 7 ++----- 5 files changed, 28 insertions(+), 11 deletions(-) create mode 100644 client/src/components/Sidebar/Header.tsx diff --git a/client/src/components/Sidebar/ConfButton.tsx b/client/src/components/Sidebar/ConfButton.tsx index cbecf17d..b14eb426 100644 --- a/client/src/components/Sidebar/ConfButton.tsx +++ b/client/src/components/Sidebar/ConfButton.tsx @@ -1,3 +1,4 @@ +import { memo } from 'react'; import { useConfContext } from 'src/hooks/useConfContext'; import useSocketContext from 'src/hooks/useSocketContext'; import color from 'styles/color.module.scss'; @@ -26,4 +27,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 578d1375..0db6cc7d 100644 --- a/client/src/components/Sidebar/MomList.tsx +++ b/client/src/components/Sidebar/MomList.tsx @@ -1,6 +1,5 @@ -import { useState, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; -import useMom from 'src/hooks/useSelectedMom'; +import { useState, useEffect, memo, useMemo, useCallback } from 'react'; +import useSelectedMom from 'src/hooks/useSelectedMom'; import useSocketContext from 'src/hooks/useSocketContext'; import { TMom } from 'src/types/mom'; @@ -11,7 +10,7 @@ interface MomListProps { } function MomList({ moms }: MomListProps) { - const { selectedMom, setSelectedMom } = useMom(); + const { selectedMom, setSelectedMom } = useSelectedMom(); const { momSocket: socket } = useSocketContext(); const [momList, setMomList] = useState(moms); diff --git a/client/src/components/Sidebar/index.tsx b/client/src/components/Sidebar/index.tsx index 137d2fec..c31bbb4c 100644 --- a/client/src/components/Sidebar/index.tsx +++ b/client/src/components/Sidebar/index.tsx @@ -1,9 +1,9 @@ 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 { @@ -13,10 +13,7 @@ interface SidebarProps { function Sidebar({ workspace }: SidebarProps) { return (
-
-

{workspace.name}

- -
+
From ee1a2cd1f782fe528c6aa98b5c328d49045fb55f Mon Sep 17 00:00:00 2001 From: dohun Date: Thu, 1 Dec 2022 19:50:12 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20Import,=20console=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/Sidebar/MomList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/Sidebar/MomList.tsx b/client/src/components/Sidebar/MomList.tsx index 0db6cc7d..33bb3cc9 100644 --- a/client/src/components/Sidebar/MomList.tsx +++ b/client/src/components/Sidebar/MomList.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, memo, useMemo, useCallback } from 'react'; +import { useState, useEffect } from 'react'; import useSelectedMom from 'src/hooks/useSelectedMom'; import useSocketContext from 'src/hooks/useSocketContext'; import { TMom } from 'src/types/mom'; From ccd27bacf83b53d5f2613dc5670131e413792223 Mon Sep 17 00:00:00 2001 From: dohun Date: Thu, 1 Dec 2022 22:12:45 +0900 Subject: [PATCH 3/4] refactor: MomList memoization Resolve: #182 --- client/src/components/Sidebar/MomList.tsx | 14 +++++++------- client/src/components/Sidebar/index.tsx | 6 ++++-- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/client/src/components/Sidebar/MomList.tsx b/client/src/components/Sidebar/MomList.tsx index 33bb3cc9..bb937a00 100644 --- a/client/src/components/Sidebar/MomList.tsx +++ b/client/src/components/Sidebar/MomList.tsx @@ -1,5 +1,4 @@ -import { useState, useEffect } from 'react'; -import useSelectedMom from 'src/hooks/useSelectedMom'; +import { useState, useEffect, memo } from 'react'; import useSocketContext from 'src/hooks/useSocketContext'; import { TMom } from 'src/types/mom'; @@ -7,10 +6,10 @@ import style from './style.module.scss'; interface MomListProps { moms: TMom[]; + setSelectedMom: React.Dispatch>; } -function MomList({ moms }: MomListProps) { - const { selectedMom, setSelectedMom } = useSelectedMom(); +function MomList({ moms, setSelectedMom }: MomListProps) { const { momSocket: socket } = useSocketContext(); const [momList, setMomList] = useState(moms); @@ -19,14 +18,15 @@ function MomList({ moms }: MomListProps) { }; const onSelect = (targetId: string) => { - if (selectedMom && selectedMom._id === targetId) return; socket.emit('select-mom', targetId); }; useEffect(() => { setMomList(moms); - socket.on('created-mom', (mom) => setMomList((prev) => [...prev, mom])); + socket.on('created-mom', (mom) => { + setMomList((prev) => [...prev, mom]); + }); socket.on('selected-mom', (mom) => { setSelectedMom(mom); @@ -53,4 +53,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 c31bbb4c..91dd940a 100644 --- a/client/src/components/Sidebar/index.tsx +++ b/client/src/components/Sidebar/index.tsx @@ -1,3 +1,4 @@ +import useSelectedMom from 'src/hooks/useSelectedMom'; import { WorkspaceInfo } from 'src/types/workspace'; import ConfButton from './ConfButton'; @@ -5,17 +6,18 @@ import Header from './Header'; import MemberList from './MemberList'; import MomList from './MomList'; import style from './style.module.scss'; - interface SidebarProps { workspace: WorkspaceInfo; } function Sidebar({ workspace }: SidebarProps) { + const { setSelectedMom } = useSelectedMom(); + return (
- +
); From 74983ad196b74d5969c625886c8a6fc868eeaa6b Mon Sep 17 00:00:00 2001 From: dohun Date: Thu, 1 Dec 2022 22:13:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20useMom=20=ED=9B=85=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit useMom -> useSelectedMom Resolve: #182 --- client/src/hooks/useSelectedMom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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('아니요. 없어요.');