今天幫記帳 App 加入每月預算設定與超支警示功能。
這次加入預算上限，不但讓使用者知道自己目前的消費進度，也可以確認花費有沒有快要超支。

設定每月預算與超支警示
我先讓預算金額存到 localStorage，預設預算設20,000 元。
我也使用了 prompt 和 alert，讓使用者可以直接輸入或修改每月預算
當使用者修改預算後，再透過 useEffect 同步儲存：

這樣重新整理頁面後，預算也不會消失。

讓 BudgetCard 跟著資料動態變化
這次將預算功能整理成獨立的 BudgetCard 元件，並利用 useMemo 計算目前的消費比例，讓進度條能隨著消費金額即時更新。

再根據消費比例控制進度條的寬度與顏色：

• 90% 以上 → 紅色
• 70%～89% → 黃色／橘色
• 70% 以下 → 綠色
  除了這些以外，當消費金額超過預算時，會顯示警示文字，提醒使用者目前已經超支，讓預算狀態更加直觀。

今天又看到memo，雖然之前就看到過也詢問過，但我還是不太清楚，自己記不起來這件事雖然讓我有點氣餒，但本來知識就是要一再複習才能記得更清楚
AI 用「防重繪隔離牆」來形容 React.memo，讓我比較容易理解。

原本父元件重新渲染時，子元件也可能跟著重新渲染。
而使用 React.memo 後，如果傳給子元件的 Props 沒有改變，React 就可以跳過這次不必要的重新渲染。

我也搞懂了它和 useMemo 的差別：

• useMemo：記住「計算結果」
• React.memo：避免「元件不必要地重新渲染」

今天也貼上今天的成果:

總結：
今天完成了每月預算、動態進度條和超支警示，也更加熟悉localStorage、useMemo 和 React.memo。
資料保存 → localStorage
計算結果快取 → useMemo
避免元件不必要重繪 → React.memo
除了功能的設計以外，使用者看到的效果和程式執行的效率也很重要。