⚡ Bolt: 캘린더 월간 뷰 그리드 렌더링 최적화

.jules/bolt.md

@@ -10,3 +10,7 @@
 ## 2024-05-24 - Memoizing inline array maps
 **Learning:** Inline mapping of arrays inside JSX in large React components causes O(N) recalculation on every render.
 **Action:** Wrap inline JSX elements that map over arrays (e.g., lists of tasks) in a `useMemo` hook with specific dependencies.
+
+## 2024-08-01 - O(N) Array Generation and Mapping in React Grids
+**Learning:** Inline array generation and mapping (e.g., `Array.from({ length: 35 }).map(...)`) inside the JSX return function of grid components like CalendarMonthView causes O(N) recalculations on every render, which can block the main thread during unrelated state updates.
+**Action:** Wrap inline array generation and element mapping within a `useMemo` hook, especially for fixed-size grid components, ensuring that DOM elements are only regenerated when necessary dependencies (like `monthEventsByDay`) change.

frontend/src/components/calendar/CalendarMonthView.tsx

@@ -20,26 +20,30 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
     return grouped;
   }, [visibleMonthEvents]);
 
+  const gridCells = useMemo(() => {
+    return Array.from({ length: 35 }).map((_, i) => {
+      const dayEvents = monthEventsByDay.get(i) ?? [];
+      return (
+        <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
+          <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
+          {dayEvents.map((event) => (
+            <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
+              {event.time}<span className="hidden sm:inline"> {event.title}</span>
+            </div>
+          ))}
+        </div>
+      );
+    });
+  }, [monthEventsByDay]);
+
   return (
     <div className="h-full rounded-2xl border border-border bg-card shadow-sm flex flex-col overflow-hidden">
       <div className="grid grid-cols-7 border-b border-border bg-secondary/50 text-center text-sm font-semibold py-3">
         <div className="text-red-500">일</div><div>월</div><div>화</div><div>수</div><div>목</div><div>금</div><div className="text-blue-500">토</div>
       </div>
       <div className="grid grid-cols-7 grid-rows-5 flex-1 divide-x divide-y divide-border">
         {/* Simulated Grid Cells */}
-        {Array.from({ length: 35 }).map((_, i) => {
-          const dayEvents = monthEventsByDay.get(i) ?? [];
-          return (
-            <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
-              <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
-              {dayEvents.map((event) => (
-                <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
-                  {event.time}<span className="hidden sm:inline"> {event.title}</span>
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        {gridCells}
       </div>
     </div>
   );