perf: 노드 클릭 시 렌더링 최적화

Author: yewonJin

apps/frontend/src/entities/node/ui/NoteNode/index.tsx

@@ -1,34 +1,25 @@
-import { useEffect, useState } from "react";
 import { FileText } from "lucide-react";
 import { Handle, NodeProps, Position } from "@xyflow/react";
 
 import { NoteNodeType } from "../../model/nodeTypes";
-import { usePageStore } from "@/entities/page";
-import { useUserStore } from "@/entities/user";
+import { type User } from "@/entities/user";
 import { ActiveUser, Emoji } from "@/shared/ui";
 
-export function NoteNode({ data }: NodeProps<NoteNodeType>) {
-  const { currentPage, setCurrentPage } = usePageStore();
-  const { users } = useUserStore();
-
-  const [activeUsers, setActiveUsers] = useState(users);
-
-  useEffect(() => {
-    setActiveUsers(users);
-  }, [users]);
-
-  const handleNodeClick = () => {
-    const id = data.id;
-    if (id === undefined || id === null) {
-      return;
-    }
-
-    setCurrentPage(id);
-  };
+interface NoteNodeProps extends NodeProps<NoteNodeType> {
+  isClicked: boolean;
+  handleNodeClick: () => void;
+  users: User[];
+}
 
+export function NoteNode({
+  data,
+  isClicked,
+  users,
+  handleNodeClick,
+}: NoteNodeProps) {
   return (
     <div
-      className={`h-24 w-48 rounded-lg border-[1px] ${currentPage === data.id ? "border-[#8dbaef]" : "border-[#eaeaea]"} bg-white p-3 shadow-sm`}
+      className={`h-24 w-48 rounded-lg border-[1px] ${isClicked ? "border-[#8dbaef]" : "border-[#eaeaea]"} bg-white p-3 shadow-sm`}
       onClick={handleNodeClick}
     >
       <Handle
@@ -68,12 +59,7 @@ export function NoteNode({ data }: NodeProps<NoteNodeType>) {
           )}
           <div className="w-full truncate">{data.title}</div>
         </div>
-        <ActiveUser
-          className="self-end"
-          users={activeUsers.filter(
-            (user) => user.currentPageId === data.id.toString(),
-          )}
-        />
+        <ActiveUser className="self-end" users={users} />
       </div>
     </div>
   );

apps/frontend/src/features/canvas/model/useCanvas.ts

@@ -19,6 +19,7 @@ import { usePageStore } from "@/entities/page";
 import { createSocketIOProvider } from "@/shared/api";
 import { useWorkspace } from "@/shared/lib";
 import { useYDocStore } from "@/shared/model";
+import { useUserStore } from "@/entities/user";
 
 export interface YNode extends Node {
   isHolding: boolean;
@@ -29,7 +30,6 @@ export const useCanvas = () => {
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const workspace = useWorkspace();
   const { ydoc } = useYDocStore();
-
   const { cursors, handleMouseMove, handleNodeDrag, handleMouseLeave } =
     useCollaborativeCursors({
       ydoc,
@@ -39,6 +39,7 @@ export const useCanvas = () => {
   const holdingNodeRef = useRef<string | null>(null);
 
   const { currentPage, setCurrentPage } = usePageStore();
+  const { users } = useUserStore();
 
   const { fitView } = useReactFlow();
 
@@ -283,17 +284,25 @@ export const useCanvas = () => {
     [ydoc],
   );
 
+  const handleNodeClick = useCallback((id: number) => {
+    setCurrentPage(id);
+  }, []);
+
   return {
-    handleMouseMove,
+    currentPage,
     nodes,
     edges,
+    users,
+    setCurrentPage,
+    handleMouseMove,
     handleNodesChange,
     handleEdgesChange,
     handleMouseLeave,
     handleNodeDrag,
     onNodeDragStart,
     onNodeDragStop,
     onConnect,
+    handleNodeClick,
     cursors,
   };
 };

apps/frontend/src/features/canvas/ui/Canvas/index.tsx

@@ -6,44 +6,56 @@ import {
   Background,
   BackgroundVariant,
   ConnectionMode,
-  type Node,
+  NodeProps,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 import { CollaborativeCursors } from "../CollaborativeCursors";
 import { useCanvas } from "../../model/useCanvas";
-import { MemoizedGroupNode, NoteNode } from "@/entities/node";
+import { MemoizedGroupNode, NoteNode, NoteNodeType } from "@/entities/node";
 import { cn } from "@/shared/lib";
 
-const proOptions = { hideAttribution: true };
-
-export interface YNode extends Node {
-  isHolding: boolean;
-}
-
 interface CanvasProps {
   className?: string;
 }
 
 export function Canvas({ className }: CanvasProps) {
   const {
-    handleMouseMove,
+    currentPage,
     nodes,
     edges,
+    users,
+    cursors,
+    handleNodeClick,
+    handleMouseMove,
     handleNodesChange,
     handleEdgesChange,
     handleMouseLeave,
     handleNodeDrag,
     onNodeDragStart,
     onNodeDragStop,
     onConnect,
-    cursors,
   } = useCanvas();
 
-  const nodeTypes = useMemo(
-    () => ({ note: NoteNode, group: MemoizedGroupNode }),
-    [],
-  );
+  const proOptions = { hideAttribution: true };
+
+  const nodeTypes = useMemo(() => {
+    return {
+      note: (props: NodeProps<NoteNodeType>) => {
+        return (
+          <NoteNode
+            {...props}
+            isClicked={currentPage === props.data.id}
+            handleNodeClick={() => handleNodeClick(props.data.id)}
+            users={users.filter(
+              (user) => user.currentPageId === props.data.id.toString(),
+            )}
+          />
+        );
+      },
+      group: MemoizedGroupNode,
+    };
+  }, [users]);
 
   return (
     <div className={cn("", className)} onMouseMove={handleMouseMove}>