Chapter 1: Getting Started with React

1.1 React Overview
1.1.1 React's Core Philosophy
1.1.2 React Features
1.1.3 Why You Should Learn React
1.1.4 React's Evolution
1.2 Setting up the development environment
1.2.1 Installing Node.js
1.2.2 Installing VSCode
1.2.3 Installing the VSCode Extension
1.2.4 Installing a Web Browser
1.3 Creating a React Application
1.3.1 Creating a Project with Vite
1.3.2 Deleting and modifying unnecessary folders and files
1.3.3 Basic Structure Overview

Chapter 2 JSX Overview

2.1 What is JSX?
2.2 Syntactic Features of JSX
2.2.1 Returning a single root element
2.2.2 Close all tags
2.2.3 Tag attributes are written in camel case.
2.2.4 Using expressions within curly brackets
2.2.5 Specifying inline styles as objects
2.2.6 Writing comments within curly brackets

Chapter 3 Components

3.1 What is a component?
3.2 Types of Components
3.2.1 Class Components
3.2.2 Functional Components
3.2.3 Using class components and functional components
3.3 Component Basics
3.3.1 Component Extensions
3.3.2 Component Definition
3.3.3 Adding Components
3.3.4 Component Tree
3.4 Components and props objects
3.4.1 What is a props object?
3.4.2 Finding the props object type
3.4.3 Destructuring assignment and type definition of the props object
3.4.4 Props and the spread operator
3.4.5 children
3.5 Components and Events
3.5.1 Event Properties
3.5.2 Event Handlers
3.5.3 Event Object
3.5.4 Event Propagation

Chapter 4 Component States

4.1 What is the state of a component?
4.2 The useState Hook: Basic State Management
4.2.1 Basic syntax of the useState hook
4.2.2 Using the useState Hook
4.2.3 Using the useState hook multiple times
4.2.4 Precautions when using the useState hook
4.3 The useReducer Hook: Complex State Management
4.3.1 Basic useReducer hook syntax
4.3.2 Using the useReducer Hook
4.3.3 Using the useReducer hook multiple times
4.4 State Management Patterns
4.4.1 Passing Status
4.4.2 Raising the status
4.5 Checking status values ​​with developer tools

Chapter 5 Component Styling

5.1 Styling the traditional way
5.1.1 Inline Styles
5.1.2 Global Style
5.1.3 CSS Modules
5.1.4 classnames library
5.2 Styling with CSS-in-JS
5.2.1 styled-components
5.2.2 emotion
5.2.3 vanilla-extract
5.3 Styling with Tailwind CSS
5.3.1 Installation and Basic Usage
5.3.2 tailwlind-merge library
5.4 Rendering Images
5.4.1 Preparing Image Resources
5.4.2 Rendering images from the public folder
5.4.3 Rendering images from the src folder
5.5 Applying Fonts
5.5.1 Applying Google Fonts
5.5.2 Applying web fonts with @font-face

Chapter 6: Building a Calculator

6.1 Introduction to the Practice Contents
6.2 Setting up the basic structure of a React application
6.2.1 Creating a Project
6.2.2 Organizing unnecessary folders and files
6.3 Configuring the UI
6.3.1 Writing HTML
6.3.2 Writing CSS
6.4 Binding Data and Connecting Events
6.4.1 Defining Data and Event Handlers
6.4.2 Defining and Connecting Event Handlers
6.5 Implementing the logic
6.5.1 Implementing Number Input Logic
6.5.2 Implementing Operation Logic
6.5.3 Implementing Initialization Logic
6.5.4 Implementing Decimal Logic
6.5.5 Handling Exceptions

Chapter 7 Conditional Rendering and Iterative Rendering

7.1 Conditional Rendering
7.1.1 Conditional Rendering Using the if Statement
7.1.2 Conditional Rendering Using the Ternary Operator
7.1.3 Conditional Rendering Using the AND Operator
7.2 Iterative Rendering
7.2.1 Understanding the Basic Concepts of Iterative Rendering
7.2.2 Using the map() method
7.2.3 Other Usage

Chapter 8: Handling Forms

8.1 Defining a Form
8.2 Controlling Forms
8.2.1 Control Components
8.2.2 Uncontrolled components
8.3 Taking Form Control One Step Further
8.3.1 Using the useRef Hook
8.3.2 Using Custom Hooks
8.3.3 Custom Hooks in Detail
8.4 Form Validation
8.4.1 Using Basic Validation
8.4.2 Adding Custom Validation Logic
8.4.3 Using the Library
8.5 Ref Changes in React 19
8.5.1 Passing components of ref objects
8.5.2 Cleanup functions

Chapter 9: Hands-on: Building a To-Do Management Application

9.1 Introduction to the Practice Contents
9.2 Configuring the UI
9.2.1 Setting up the basic structure
9.2.2 Writing HTML
9.2.3 Writing CSS
9.3 Separating Components
9.3.1 Breaking down complex 〈svg〉 elements into components
9.3.2 Separating button elements into components
9.3.3 Separating text input elements into components
9.3.4 Separating the checkbox element into components
9.3.5 Separating layout elements into components
9.4 Implementing the Function
9.4.1 Entering a to-do list
9.4.2 Printing a To-Do List
9.4.3 Processing completed tasks
9.4.4 Deleting a Task
9.4.5 Editing a task

Chapter 10: Unique IDs and Side Effects

10.1 useId hook
10.2 useEffect hook
10.2.1 Component Lifecycle
10.2.2 useEffect Hook Example
10.3 Improving the To-Do Management Application
10.3.1 Linking Form Elements
10.3.2 Saving a task

Chapter 11 Component Optimization

11.1 Component Optimization Overview
11.1.1 Performance Optimization Methods
11.1.2 Unnecessary re-rendering
11.1.3 Memoization
11.2 Component Memoization
11.2.1 Using React.memo
11.2.2 Precautions when using React.memo
11.3 Function Memoization
11.3.1 Passing functions as props
11.3.2 Using the useCallback Hook
11.3.3 Precautions when using the useCallback hook
11.4 Value Memoization
11.4.1 Performance degradation issues for computationally expensive tasks
11.4.2 Using the useMemo Hook
11.4.3 Precautions when using the useMemo hook
11.5 Loading Performance Optimization
11.5.1 Code Splitting with React.lazy()
11.5.2 Suspense
11.5.3 ErrorBoundary
11.6 Status Update Optimization
11.6.1 useDeferredValue Hook (React 19 and later)
11.6.2 useTransition Hook
11.7 Resource Loading Optimization (React 19 and later)
11.8 Improving the To-Do Management Application
11.8.1 Finding Unnecessary Re-Rendering Code
11.8.2 Optimizing Unnecessary Re-Rendering

Chapter 12 Global State Management

12.1 Understanding State Management
12.1.1 Local State Management 1
12.1.2 Global State Management
12.2 Managing Global State with the Context API
12.2.1 Creating a Context Object
12.2.2 Specifying Context Scoping with Provider
12.2.3 Creating a custom useContext hook
12.2.4 Using global state shared with context
12.2.5 Optimizing Rendering
12.2.6 Using Context Nesting
12.2.7 Precautions when using the Context API
12.2.8 Using the Context API with the use hook (React 19 and later)
12.3 Managing Global State with Redux
12.3.1 Installing Redux and Redux Toolkit
12.3.2 Creating a Redux Store
12.3.3 Providing a Redux Store to React
12.3.4 Creating a Redux State Slice
12.3.5 Adding a Slice to the Store
12.3.6 Using the Store
12.3.7 Changing state by passing values
12.3.8 Using Developer Tools
12.4 Managing Global State with Zustand
12.4.1 Installing Zustand
12.4.2 Creating a Zustand Store
12.4.3 Using the Zustand Store
12.4.4 Advanced Features of Zustand
12.5 Applying Global State Management to a To-Do Application
12.5.1 Installing Zustand
12.5.2 Creating a Store
12.5.3 Using the Store

Chapter 13: Using Routing Functions with React Router

13.1 Understanding Routing Methods
13.1.1 SPA and CSR
13.1.2 MPA and SSR
13.1.3 React and React Router
13.2 Working with React Router
13.2.1 Installing React Router
13.2.2 Creating a Routing Component
13.2.3 Specifying the Routing Scope
13.2.4 Setting up a route
13.3 Using React Router Features
13.3.1 Nested Routes
13.3.2 Layout Routes
13.3.3 Route Prefix
13.3.4 Dynamic Segments
13.3.5 Optional Segments
13.3.6 Splat
13.3.7 Setting Document Metadata (React 19 and later)
13.4 Using the Navigation Function
13.4.1 Moving via links
13.4.2 Programmatic Routing

Chapter 14 Asynchronous Data Communication and Processing Techniques

14.1 Basic Concepts of Data Communication
14.1.1 HTTP and Methods
14.1.2 API
14.2 Creating an API Server with Node.js
14.2.1 Running the API Server
14.2.2 Checking the API Server Code
14.3 Communicating Data with the Fetch API
14.3.1 Basic Grammar
14.3.2 How to Use HTTP Methods
14.3.3 Using in React
14.4 Communicating Data with Axios
14.4.1 Installing the Axios Library and Basic Grammar
14.4.2 How to Use HTTP Methods
14.4.3 Using in React
14.5 Digging into Data Communications
14.5.1 Setting up initial data
14.5.2 Safely Processing Response Data
14.5.3 Defining Error Conditions and Handling Errors
14.5.4 Defining and Handling Loading States
14.5.5 Canceling a Data Request
14.5.6 Using Custom Hooks: The Fetch API Method
14.5.7 Using Custom Hooks: The Axios Way
14.6 Deepening Asynchronous Data Processing
14.6.1 Writing a Basic Example
14.6.2 Handling Asynchronous Data with the useTransition Hook
14.6.3 Handling Asynchronous Data with the useActionState Hook
14.6.4 Handling Asynchronous Data with the useFormStatus Hook
14.6.5 Handling Asynchronous Data with the useOptimistic Hook
14.6.6 Using the use hook (React 19 and later)
14.6.7 Better use of the use hook (React 19 and later)

Chapter 15 Project: Creating Your Own Blog

15.1 Blog Application Overview
15.1.1 Application UI
15.1.2 Project Folder Structure
15.2 Configuring the UI
15.2.1 Scaffolding
15.2.2 Routing
15.2.3 Writing HTML
15.2.4 Writing CSS
15.2.5 Separating Components
15.3 Implementing the Authentication Function
15.3.1 Running the Backend API Server
15.3.2 Understanding Authentication Features
15.3.3 Implementing the Authentication Function
15.3.4 Handling Header Area Branches
15.3.5 Maintaining authentication after a refresh
15.3.6 Setting page-by-page access control
15.3.7 Including an Access Token Value in a Request
15.4 Implementing CRUD Functions
15.4.1 Implementing the Writing Function
15.4.2 Implementing the Post List Display Function
15.4.3 Implementing a Post Detail Page
15.4.4 Implementing the Related Posts Feature
15.4.5 Implementing the Search Function
15.4.6 Added Feature: Handling Token Expiration
15.4.7 Added: Error Handling
15.5 Deployment
Building 15.5.1
15.5.2 Deploying with Netlify