From ffdd4cb0b3d7549e68e86430fe949d651148b013 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Sat, 1 Aug 2026 13:48:36 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Bolt:=20=EC=BA=98=EB=A6=B0=EB=8D=94?=
 =?UTF-8?q?=20=EC=9B=94=EA=B0=84=20=EB=B7=B0=20=EA=B7=B8=EB=A6=AC=EB=93=9C?=
 =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CalendarMonthView 컴포넌트에서 그리드 셀을 생성하는 배열(크기 35)의 매핑 로직을 `useMemo`로 분리하여 O(N)의 불필요한 렌더링 주기를 없앴습니다.
---
 .jules/bolt.md                                |  4 +++
 .../components/calendar/CalendarMonthView.tsx | 30 +++++++++++--------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/.jules/bolt.md b/.jules/bolt.md
index 231af188b..e716cd6d6 100644
--- a/.jules/bolt.md
+++ b/.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.
diff --git a/frontend/src/components/calendar/CalendarMonthView.tsx b/frontend/src/components/calendar/CalendarMonthView.tsx
index ae8b731d6..c6c74bcf1 100644
--- a/frontend/src/components/calendar/CalendarMonthView.tsx
+++ b/frontend/src/components/calendar/CalendarMonthView.tsx
@@ -20,6 +20,22 @@ 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">
@@ -27,19 +43,7 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
       </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>
   );