KD's Tech Blog

Hi, 我是 KD Chang 凱迪，紀錄關於軟體開發/程式設計/工程思維的技術筆記 | KD 技術部落格

React Hooks useRef 入門教學 | w3schools 學習筆記

前言在 React 中，useRef 是一個非常實用的 Hook，它提供了一個方法來在元件重新渲染之間保留值。不同於 useState，當 useRef 的值改變時不會觸發元件重新渲染，這使它成為追蹤狀態變化、儲存 DOM 參考或避免不必要重新渲染的理想選擇。 本文將深入說明 useRef 的三種主要用途： 避免重新渲染的狀態儲存 直接操作 DOM 元素 追蹤先前的狀態值 重點摘要 u......

Posted by kdchang on 2024-01-19

React Hooks useContext 入門教學 | w3schools 學習筆記

前言在 React 應用程式中，當需要在多個巢狀元件之間共享資料時，傳遞 props 是最基本的做法。但當元件層級變深，這樣的資料傳遞會變得繁瑣且難以維護，這種情況被稱為「props drilling」。為了解決這個問題，React 提供了 Context API，搭配 useContext Hook 可以讓你在不需要一層層傳遞 props 的情況下，輕鬆地在深層元件中讀取共享的狀態。 重......

Posted by kdchang on 2024-01-18

React Hooks useEffect 入門教學 | w3schools 學習筆記

前言在 React 函式型元件中，useEffect 是一個強大且常用的 Hook，用來處理副作用（side effects）。副作用指的是那些不直接涉及元件渲染的操作，例如：發送 API 請求、操作 DOM、設定或清除計時器等。 傳統上，這些操作會在 componentDidMount、componentDidUpdate 或 componentWillUnmount 等生命週期函式中進行......

Posted by kdchang on 2024-01-18

React Hooks useState 入門教學 | w3schools 學習筆記

前言在 React 函式元件中，useState 是最常用的 Hook 之一，能讓我們在無需使用 class 的情況下新增與管理元件的「狀態」（state）。狀態是指會隨著使用者互動或應用邏輯變化而更新的資料，例如：輸入框的內容、按鈕點擊次數、切換的主題顏色等。 重點摘要 useState 是 React 提供的 Hook，用來在函式型元件中儲存與更新狀態。 使用前需先從 react 匯入......

Posted by kdchang on 2024-01-17

React Hooks 入門教學 | w3schools 學習筆記

前言Hooks 是在 React 16.8 版本中加入的新功能。Hooks 讓你可以在「函式元件（function components）」中使用狀態（state）以及其他 React 功能。因此，自從有了 Hooks 之後，類別元件（class components）通常就不再是必要的了。 儘管 Hooks 幾乎取代了類別元件的使用方式，但 React 團隊目前並沒有打算移除 class ......

Posted by kdchang on 2024-01-16

在 React 中使用 Sass 進行樣式設計教學 | w3schools 學習筆記

前言在現代前端開發中，維護與管理 CSS 樣式是一項重要任務，尤其當應用程式日益龐大、元件複雜時，單純使用原生 CSS 經常會遇到樣式難以重用、命名衝突等問題。這時候，Sass（Syntactically Awesome Stylesheets）這類 CSS 預處理器便顯得格外實用。Sass 提供變數、巢狀語法、Mixin 等強大功能，有助於讓樣式更具模組化與可維護性。 本篇教學將說明如何在......

Posted by kdchang on 2024-01-15

React 中使用 CSS 的三種方式教學 | w3schools 學習筆記

前言在開發 React 應用程式時，樣式的管理與設計是一項不可忽視的重要部分。雖然 React 是一個 JavaScript 函式庫，主要用於建構使用者介面，但它本身並不限制開發者如何為元件加上樣式。React 提供多種整合 CSS 的方法，這篇文章將會深入介紹三種最常見的樣式處理方式：行內樣式（Inline Styling）、CSS 樣式表（Stylesheet）以及CSS 模組（CSS ......

Posted by kdchang on 2024-01-14

提升效能的利器：React.memo 使用入門教學 | w3schools 學習筆記

前言在 React 中，當元件的父元件重新渲染時，預設情況下其所有子元件也會一併重新渲染，即便傳入的 props 完全沒變動。這種「不必要的重新渲染」若發生在大型應用中，會導致效能下降，尤其是當某些元件非常複雜、包含大量計算或 DOM 操作時。 為了避免這種情況，React 提供了一個高階元件函式：React.memo。這個函式能讓你記憶元件的輸出結果，當傳入的 props 沒有變更時，Re......

Posted by kdchang on 2024-01-13

使用 React Router 實現多頁面導覽功能教學（React Router v6）入門教學 | w3schools 學習筆記

前言React 是一個強大的 JavaScript 函式庫，專門用於建立使用者介面。不過，React 本身並未內建「頁面路由」功能。如果你想要為你的 React 專案加入多個頁面，例如首頁、部落格、聯絡我們頁面等等，就必須引入額外的工具。而在眾多路由解決方案中，React Router 是最受歡迎且廣泛使用的選擇。 本文將帶你從零開始，教你如何在使用 Create React App 建立的......

Posted by kdchang on 2024-01-12

React 表單入門教學 | w3schools 學習筆記

前言在網頁開發中，表單（Forms）是使用者與網站互動最常見的方式之一。透過表單，我們可以讓使用者輸入資料、提交查詢、填寫訂單等。而在 React 中，表單不再只是簡單的 HTML 元素堆疊，而是成為受控元件（controlled components）的一部分，由 React 元件的 state 負責管理輸入值與提交行為。 本篇教學將帶你一步一步掌握如何在 React 中建立表單、處理輸入......

Posted by kdchang on 2024-01-11

ABOUT ME
KD's Tech Blog 技術部落格 | KD Chang 張凱迪

KD Chang 張凱迪（@kdchang），台灣大學，主修經濟學，臺大資管所畢業。是一個軟體工程師，也是一位 PM 產品/專案經理和教育工作者。曾服務過上市網路軟體公司、上市科技電子公司、台灣 AI 人工智慧新創獨角獸公司，也曾參與數個新創組織的創辦和多個網路產品服務的開發。A Software Engineer, Product/Project Manager & Educator.:)

FRIENDS