[PART 1] A Look Back at Front-End Development

Chapter 1: A Look Back at Front-End Components and Their Development
__1.1 Why we need to look back at the components and development process of the front-end
__1.2 The status and components of web development and front-end
__1.3 Early web frontend
__1.4 The Birth and Limitations of Modules
__1.5 The Birth of a Bundler
__1.6 Introduction of the package manager
__1.7 Introduction of the template engine
__1.8 Imperative and Declarative Programming
____1.8.1 Imperative Front-End Development
____1.8.2 Declarative Front-End Development
Learning Wrap-Up | Key Keyword Reminder

Chapter 2: A Look Back at Single-Page Applications
__2.1 Why We Should Review the Advantages of Single-Page Applications
__2.2 Network call frequency
__2.3 Performance improvements
__2.4 Productivity Improvement
____2.4.1 Strict separation of front-end and back-end development areas
____2.4.2 Rapid Prototyping Using Declarative Programming
Learning Wrap-Up | Key Keyword Reminder

Chapter 3: A Look Back at the Phases of UI Components
__3.1 Why we need to look back at the phase of UI components
__3.2 Status of UI components in front-end development
__3.3 Abstraction, interface, and encapsulation of UI components
__3.4 Creating Components with Vanilla JavaScript
__3.5 Creating Components Using the Web Components API
__3.6 Comparing Components Using Vanilla JavaScript vs. the Web Components API
Learning Wrap-Up | Key Keyword Reminder

Chapter 4: A Look Back at Status and Reactivity
__4.1 Why we need to look at status and reactivity
__4.2 State and Design Components
____4.2.1 UI, View in charge of interaction
____4.2.2 Model responsible for data
____4.2.3 Mediator between model and view
__4.3 Implementing Reactivity Using Key Design Patterns
____4.3.1 Creating a Non-Reactive MVC Pattern Mediator
____4.3.2 Injecting Reactivity into the MVC Pattern
__4.4 Understanding the Observer Pattern
__4.5 MVVM Pattern and Reactivity
____4.5.1 Two-way and one-way binding
____4.5.2 Creating a to-do list using the MVVM pattern
____4.5.3 Getting to Know Binders
____4.5.4 Creating a Binder
Learning Wrap-Up | Key Keyword Reminder

Chapter 5: A Look Back at Front-End Components and Their Development
__5.1 Why you should review your development environment
__5.2 Node.js and Version Manager
____5.2.1 Node.js Structure and Principles
____5.2.2 Node Version Manager
__5.3 Package Manager
____5.3.1 Package Manager Comparison
__5.4 Monorepo
____5.4.1 Advantages of Monorepo and Monorepo Tools
__5.5 Code Quality and Code Formatting
____5.5.1 Linter
____5.5.2 Formatter
____5.5.3 Code Static Analyzer
__5.6 React Development Tools
____5.6.1 React DevTools
____5.6.2 React Scan
__5.7 React development environment and build tools
____5.7.1 bit
____5.7.2 Rsbuild
____5.7.3 React Router
Learning Wrap-Up | Key Keyword Reminder

[PART 2] A Deep Dive into React's Core Elements

Chapter 6: A Look Back at JSX Components
__6.1 Why you should study JSX
__6.2 Understanding DSL and JSX
__6.3 Elements that make up JSX
____6.3.1 JSXElements
____6.3.2 JSXAttributes
____6.3.3 JSXChildren
____6.3.4 JSX Strings
Learning Wrap-Up | Key Keyword Reminder

Chapter 7: Reviewing JSX's Core Grammar and JavaScript Transformation
__7.1 Why we need to review JSX core syntax and JavaScript transformation
__7.2 Converting JSX
____7.2.1 What is automatic runtime?
____7.2.2 Converting JSX with Babel
____7.2.3 Converting JSX to SWC
____7.2.4 Converting JSX with ESBuild
____7.2.5 React.createElement, React Elements, and the Virtual DOM
__7.3 Reviewing JSX's Core Grammar
____7.3.1 Reviewing Template Literals and Tagged Templates
____7.3.2 JSX VS Template Literals
____7.3.3 Synthesis Events
____7.3.4 Single Root Element
____7.3.5 Ternary Operator and &&
Learning Wrap-Up | Key Keyword Reminder

Chapter 8: React Refactoring and Key Props
__8.1 Why You Should Consider Rendering and the Virtual DOM
__8.2 React components and instances
__8.3 Rendering and Re-Rendering
__8.4 Rebalancing Process
__8.5 Shallow Comparison and Rendering Optimization
__8.6 Key Props and List Rendering
__8.7 Key Props and Memoization
Learning Wrap-Up | Key Keyword Reminder

Chapter 9: Reviewing React Rendering Rules
__9.1 Why You Should Review React Rendering Rules
__9.2 Rendering Conditions
____9.2.1 When the application first loads
____9.2.2 Re-rendering due to changes in internal component state
____9.2.3 When the parent component is re-rendered
____9.2.4 When the value of the context changes
__9.3 Misunderstanding about re-rendering
____9.3.1 Child Components and props.children
____9.3.2 What happens when the prop value passed to the component changes?
__9.4 React Rendering Rules
____9.4.1 Eliminating side effects and ensuring idempotence
____9.4.2 React Rendering Rules - Maintaining immutability of values ​​passed with JSX
Learning Wrap-Up | Key Keyword Reminder

Chapter 10: React's Props and Component Patterns
__10.1 Why you should review React's props and component patterns
__10.2 React's props and state concepts
____10.2.1 React's Props and State
____10.2.2 Invariance of Props
____10.2.3 Props and Attributes
__10.3 Props data type validation
____10.3.1 prop-types library for runtime validation
____10.3.2 TypeScript for compile-time verification
__10.4 Component Pattern Using Props
____10.4.1 Component Composition and Inheritance, and Higher-Order Components
____10.4.2 Nested Components and Children, Prop Drilling
____10.4.3 Render Props Pattern
____10.4.4 Slot Props Pattern
____10.4.5 Compound Component Pattern
____10.4.6 Explicit Slot Patterns - slot type RFC
Learning Wrap-Up | Key Keyword Reminder

Chapter 11: React State and Batching
__11.1 Why you should look into React's state and batching
__11.2 React's state definition and types
____11.2.1 Local and Derived States
____11.2.2 Status and Snapshots
____11.2.3 State Immutability
____11.2.4 Raising Status
__11.3 Reviewing data flow between components
____11.3.1 Unidirectional Data Flow and Unidirectional Binding
____11.3.2 Bidirectional Data Flow and Bidirectional Binding
__11.4 Revisiting React Batching
____11.4.1 The concept and necessity of batching
____11.4.
2 Batching process in asynchronous operation
____11.4.3 react-dom's flushSync( )
Learning Wrap-Up | Key Keyword Reminder

Chapter 12: A Look Back at Fibers, the Root of React
__12.1 Why You Should Consider React Fiber
__12.2 Understanding the React Stack Reconciler
____12.2.1 How the Stack Rebalancer Works
____12.2.2 Limitations of the Stack Rebalancer
__12.3 Understanding Fiber Architecture
____12.3.1 Anatomy of a Fiber Node
____12.3.2 Fiber Priority and Lanes Model
____12.3.3 Fiber Tree Structure: Traversal without Recursion
____12.3.4 Double Buffering and Alternate Pointers
____12.3.5 Fiber Architecture and Concurrency Function Principles
Learning Wrap-Up | Key Keyword Reminder

[PART 3] A Deep Dive into Using React Hooks

Chapter 13: Reviewing React Hook Usage Rules
__13.1 Why You Should Revisit React Hooks
__13.2 Why is it called a hook?
__13.3 From class components to functional components
____13.3.1 The confusion of the this keyword and the hassle of manual binding
____13.3.2 Higher-Order Components and Wrapper Hell
____13.3.3 Reusing logic using custom hooks
__13.4 Rules for using React hooks
____13.4.1 Hooks should only be called from the top level
____13.4.2 Hooks should only be called from within React functions
____13.4.3 Hook arguments must be immutable
Learning Wrap-Up | Key Keyword Reminder

Chapter 14: Essential React Hooks
__14.1 Why you should review the essential React hooks
__14.2 useState( ) : The beginning and core of React state management
____14.2.1 State Initialization and Delayed Initialization
____14.2.2 Status updates and update functions
____14.2.3 Update functions and closures
__14.3 useEffect( ) : Synchronizing a component with the outside world
____14.3.1 Reviewing useEffect() usage and the dependency array
____14.3.2 Cleaning up after side effects: useEffect( )'s cleanup function
____14.3.3 Handling Side Effects: Synchronizing with External Systems
____14.3.4 useEffect() in strict mode
__14.4 useRef( ) : How to remember values ​​beyond rendering
____14.4.1 useRef( ) does not cause re-rendering
____14.4.2 Direct access to DOM elements using useRef( )
____14.4.3 forwardRef( ) : How a parent accesses the child's DOM
____14.4.4 forwardRef( ) in React 19
__14.5 useReducer( ) and React Portal
____14.5.1 Understanding useReducer( )
____14.5.2 Creating a modal component with createPortal( )
Learning Wrap-Up | Key Keyword Reminder

Chapter 15: React Memoization in Review
__15.1 Why You Should Revisit React Memoization
__15.2 Rendering Optimization Using memo( )
____15.2.1 How to use memo( )
____15.2.2 The Pitfalls of Premature Optimization
____15.2.3 Nested Structures and the Pitfalls of Children Props
__15.3 useMemo( ) : Value memoization
____15.3.1 A Look Inside the Internals of useMemo( )
____15.3.2 Example of optimizing operations using useMemo( )
__15.4 useCallback( ) : Function memoization
____15.4.1 Passing a stable callback to a custom hook with useCallback( )
____15.4.2 Prop memoization with useCallback( )
____15.4.3 Using useCallback( ) : Making debounce work properly
__15.5 Automatic memoization using the React compiler
____15.5.1 Limitations of Manual Memoization
____15.5.2 History of Compiler Development
____15.5.3 Role and Function of the React Compiler
____15.5.4 How the React Compiler Works and How It Works
____15.5.5 Can the React compiler replace manual memoization?
____15.5.6 Trying the React Compiler
Learning Wrap-Up | Key Keyword Reminder

Chapter 16: React Context, Error Boundaries, and Suspense
__16.1 Why you should review React contexts, error boundaries, and suspense
__16.2 Building Robust Apps Using Error Boundaries
____16.2.1 Creating an error boundary component using a class component
____16.2.2 Understanding Error Propagation
____16.2.3 Rendering Errors and Error Boundary Operating Conditions
__16.3 Effective State Sharing Using the Context API
____16.3.1 What is prop drilling?
____16.3.2 Creating a Context
__16.4 Use Cases for the Context API
____16.4.1 When an intermediate component hierarchy is created and the render props pattern is used in nesting
____16.4.2 Improving using the context API
__16.5 Context API and Re-Rendering
____16.5.1 Memoization of value props in context providers
____16.5.2 Reducing the scope of re-rendering impact by separating contexts
____16.5.3 Optimizing Using the Selector Pattern
____16.5.4 Using Higher-Order Components and memo( )
__16.6 Performing asynchronous operations within a component using suspense
____16.6.1 History and Development of Suspense
____16.6.2 Error Boundaries and Suspense
____16.6.3 Suspense Internal Implementation and How It Works
__16.7 Reading context and promises using use( )
____16.7.1 Reading context values
____16.7.2 Unraveling the Promise Results
____16.7.3 How can use( ) be called within a conditional statement?
Learning Wrap-Up | Key Keyword Reminder

Chapter 17: React Concurrency Features and Advanced Hooks
__17.1 Why You Should Review React Concurrency Features and Deep Hooks
__17.2 Use Cases for useLayoutEffect( ) and useInsertionEffect( )
____17.2.1 Difference between useEffect( ) and useLayoutEffect( )
____17.2.2 React Helmet and useInsertionEffect( )
____17.2.3 Metadata and Stylesheets for React 19
__17.3 Control Inversion Using useImperativeHandle( )
__17.4 Concurrency Features and Transitions
____17.4.1 Selecting a lower priority task using useTransition( )
____17.4.2 Using deferred state values ​​with useDeferredValue( )
____17.4.3 startTransition( ) and asynchronous functions
__17.5 Synchronizing External State with useSyncExternalStore( )
____17.5.1 Internal and external states
____17.5.2 useSyncExternalStore( ) and Tiering
Learning Wrap-Up | Key Keyword Reminder

[PART 4] The Technology and Future Surrounding React

Chapter 18: React Rendering Patterns in Review
__18.1 Why You Should Review the React Rendering Pattern
__18.2 A Look Back at Client-Side Rendering and SSR
____18.2.1 Understanding Client-Side Rendering
____18.2.2 Understanding Server-Side Rendering
____18.2.3 Isomorphism and Hydration Process in Server-Side Rendering
____18.2.4 Bundle Size Analysis and next.config
__18.3 React API for Server-Side Rendering
____18.3.1 Understanding renderToString( )
____18.3.2 renderToNodeStream( ) and streaming
____18.3.3 renderToPipeableStream( ) and Streaming Rendering
__18.4 Revisiting Static Site Generation and Incremental Static Regeneration
____18.4.1 Trying static site generation in a Next.js environment
____18.4.2 Adding Incremental Static Regeneration
__18.5 Understanding React Server Components
____18.5.1 Understanding the concepts and features of server components
____18.5.2 What is a client component?
____18.5.3 React Server Component Rules
Learning Wrap-Up | Key Keyword Reminder

Chapter 19: A Look Back at the Next.js App Router, Server Actions, and New React Hooks
__19.1 Why you should review the Next.js app router, server actions, and new React hooks
__19.2 Basic Usage of Next.js App Router
____19.2.1 Routing and Rules in the App Router
____19.2.2 Special Files and Component Hierarchy
____19.2.3 Nested Routing and Layout
__19.3 Static and dynamic rendering, caching
____19.3.1 Static and Dynamic Rendering for Dynamic Routes
____19.3.2 Dynamic Rendering for Static Routes
____19.3.3 Understanding the Full Route Cache
____19.3.4 Understanding Router Cache
____19.3.5 Request Memoization and React.cache()
____19.3.6 Data Cache and fetch()
____19.3.7 Providing an API to Clients Using Route Handlers
__19.4 Using Server Functions and Server Actions
____19.4.1 Understanding Server Functions and Server Actions
____19.4.2 How Server Actions Work
__19.5 React 19 version hooks for use with actions
____19.5.1 Relationship between Actions and Server Actions
____19.5.2 Using useActionState( ) and Transitions
____19.5.3 Implementing Optimistic Updates with useOptimistic( )
____19.5.4 Checking form status with useFormStatus( )
Learning Wrap-Up | Key Keyword Reminder

★ Learning roughly will only produce rough results.
★ To provide a different level of customer experience and prevent potential problems in advance
★ You must thoroughly understand and digest the philosophy and principles of the React framework.

A competent developer should go beyond simply using APIs and clearly understand the rendering process to write predictable and bug-free code.
Therefore, to utilize AI without being replaced by it, you need to deeply understand the structure and operating principles of React.
This allows you to optimize performance by avoiding unnecessary rendering, improve code maintainability, and flexibly respond to complex requirements and emerging technological changes.
This book contains in-depth content for developers seeking ultimate and deep understanding.
I hope you grow into a steel developer who goes beyond just knowing grammar and fully understands and digests the philosophy and principles of the React framework.

★ In the AI ​​era, why do we need to understand 'React' in depth?
★ Create a turning point to become a senior who cannot be replaced by AI!

React is not a single technology, but the center of a huge 'ecosystem'.
From server-side rendering with Next.js to mobile app development with React Native to sophisticated state management with libraries like Zustand, these are all branches of the same React root.
By deeply understanding React's core philosophy and structure, you can acquire technologies within this vast ecosystem much more quickly and accurately, infinitely expanding your capabilities.
This provides the most reliable foundation for growing beyond the "I-shaped" developer who is proficient in only a specific technology into a "T-shaped" talent who creates value across the web and mobile.
The value of React's overwhelming extensibility is different from the advantages of Vue's fast learning curve or Angular's monolithic structure.

Ultimately, studying React in depth is like laying down a solid "anchor" that keeps you from getting lost in the midst of constantly changing technological trends.
Rather than chasing the latest fads in grammar or APIs, this is the most reliable way to develop the developer's inherent capabilities in designing web application structures and solving problems.

The age of automation poses questions for developers.
Will you remain an "operator" following the instructions of coding tools? Or will you become an "architect," masterfully wielding tools to create your own unique value? If you aspire to the latter, this book will help you delve into the depths of React and transform you into an "irreplaceable problem solver" who leads the way in technology.

★ Who needs this book?
★ Introducing the target audience of this book, start your qualification test with 10 questions!

This book is for those who already know JavaScript and React, but are curious about the fundamental principles of their operation whenever they encounter difficulties at work and have a desire to grow further.
If you can answer most of the following 10 web development and React-related questions, you've already become an indispensable front-end developer who won't be replaced by AI.
Unfortunately, if there are quite a few questions you don't know, you need to grow a little more.
But don't worry too much.
Because you will soon learn it through this book.

- [Question 01] What were the major shortcomings of the MPA structure that still existed even after the advent of Ajax, and what code organization methods did front-end developers use to overcome these shortcomings?
- [Question 02] Explain the biggest difference between imperative programming and declarative programming from the perspective of UI updates.
- [Question 03] What are the two main aspects that contribute to improving SPA productivity?
- [Question 04] What do ‘abstraction’ and ‘encapsulation’ mean in UI component development, and what are their main goals?
- [Question 05] What are the main differences between client state and server state, and explain each with an example in a web application?
- [Question 06] What roles do the 'event loop' and 'thread pool' in Node.js play, and how do they contribute to asynchronous task processing in Node.js?
- [Question 07] What are the two main advantages of a monorepo structure over a polyrepo structure?
- [Question 08] What should I be careful about when using the && operator for conditional rendering in JSX, and what are some alternatives to avoid this?
- [Question 09] What do the 'render stage' and the 'commit stage' do in React's rendering process, and what is the main reason these two stages are separated?
- [Question 10] What is 'Automatic Batching' introduced in React 18, and what benefits does it provide to front-end development?

* Answers to [Questions] can be found in the appendix, ‘Answers to 10 React Questions.’

★ Why should we take a closer look at React again?
★ The moment you think you know everything, you plant a bug.
★ Check out 19 reasons why you should look into React technology!

This book covers a broad range of core elements of front-end development and their evolution, guiding readers to see the bigger picture.
It systematically explains core concepts, from the early static web pages to the emergence and advantages of single-page applications (SPAs), the birth of modules, bundlers, and template engines, and the paradigm shift from imperative to declarative programming.
In addition, it covers the structure and transformation process of JSX, which is the core of React, the principles of state and props, data flow, the React rendering mechanism and the restructuring process of the virtual DOM, and even the fundamental operation and usage rules of React hooks, fiber architecture, and concurrency features, helping you deeply understand the internal principles of React and solidify your technical foundation.


As we introduce each technology, we also explain why it's worth revisiting.
The WHY is important.
HOW is just one of many ways to address the cause.
As the depth of thinking deepens, the quality of code and services improves.
Check out these 19 reasons to revisit this book.

- Reason 01.
Why We Need to Review Front-End Components and Their Development
- Reason 02.
Why You Should Consider the Benefits of Single-Page Applications
Reason 03. Why we need to look back at the status of UI components
- Reason 04.
Why we need to look at status and responsiveness
- Reason 05.
Why You Should Review Your Development Environment
- Reason 06. Why you should study JSX
- Reason 07.
Why You Should Review JSX Core Syntax and JavaScript Transformations
- Reason 08.
Why We Need to Revisit Rendering and the Virtual DOM
- Reason 09.
Why You Should Revisit React Rendering Rules
- Reason 10.
Why You Should Review React's Props and Component Patterns
- Reason 11.
Why You Should Review React's State and Batching
- Reason 12.
Why You Should Revisit React Fiber
- Reason 13.
Why You Should Revisit React Hooks
- Reason 14.
Why You Should Review React's Essential Hooks
- Reason 15.
Why You Should Revisit React Memoization
- Reason 16.
Why You Should Revisit React Contexts, Error Boundaries, and Suspense
- Reason 17.
Why You Should Revisit React Concurrency Features and Deep Hooks
- Reason 18.
Why You Should Revisit React Rendering Patterns
- Reason 19.
Why You Should Revisit Next.js App Router, Server Actions, and New React Hooks

★ For those who want to become a developer of React Steel
★ To help you take your front-end development capabilities to the next level
★ Five characteristics are generously packed into the book.

Stop memorizing React grammar! Go beyond simple coding and become a capable developer to avoid being replaced by AI.
This book is not a book that teaches all grammar.
Let's first look at how web technologies have evolved and introduce why React is necessary.
Next, we'll delve into the core concepts and explain in depth how they're applied in practice, broadening your horizons on React and web front-end development.
Here are five things you should know about React from this book:

_One, a simple and clear introduction to the 'big picture' of web development.
We'll cover how web development has evolved, from the early days of HTML to the emergence of JavaScript and CSS, and the birth of modules and bundlers to overcome the limitations of complex pages.
Explains the difference between 'imperative' and 'declarative' programming with a simple analogy, and shows how a declarative approach like React makes code more concise and readable.
Thanks to this, you can naturally understand the necessity of React without memorizing the technology.

_Second, it provides a solid foundation for React's 'core technologies'.
Learn the basics of JSX, the special syntax for creating React UI, and how browsers understand it.
Additionally, we clearly explain the 'virtual DOM' and 'rendering process', which are the secrets to React's efficient screen updates, and introduce the importance of key props that optimize performance.
You can easily learn essential hooks such as useState() (data management), useEffect() (external effect handling), and useRef() (maintain values ​​independent of rendering) with real-world examples.

_Set, Master a 'robust development environment' and 'design principles'
We will teach you how Node.js, which is essential for development, works and how to effectively use package managers such as pnpm, npm, and yarn.
Beyond simply drawing screens, you'll learn how to design reusable UI components and apply object-oriented concepts like abstraction and encapsulation to your UI.

_Net, we share the secrets to 'best performance' and 'user experience'.
Learn exactly how to use memoization techniques like React.memo(), useMemo(), and useCallback() to prevent unnecessary rendering and make your app faster. You'll also learn in detail about the principle of 'automatic batching', which allows React to process multiple state updates at once.
Additionally, you can easily compare the pros and cons of various rendering strategies, such as CSR, SSR, SSG, and ISR, which determine the initial loading speed of a website, and choose the optimal method for your project.

_Five, introducing the latest technologies and trends preparing for the future of React.
This book delves into the concepts of React Server Components (RSC) and client components, which will lead the future of web development, helping you understand the innovation of server actions that blurs the lines between servers and clients.
Ultimately, it provides a glimpse into future technologies that provide automatic optimization, such as the React compiler, and lays the foundation for flexible response to changing technological trends.

★ Structure and contents of this book

This book covers a broad range of core elements of front-end development and their evolution, guiding readers to see the bigger picture.
This book systematically explains core concepts, from the early static web pages to the emergence and advantages of single-page applications (SPAs), the birth of modules, bundlers, and template engines, and the paradigm shift from imperative to declarative programming.
In addition, it covers the structure and transformation process of JSX, which is the core of React, the principles of state and props, data flow, the React rendering mechanism and the virtual DOM restructuring process, and even the fundamental operation and usage rules of React hooks, as well as the fiber architecture and concurrency features, helping you to deeply understand the internal principles of React and solidify your technical foundation.

[Part 1] A Look Back at Front-End Development

_Chapter 1.
A Look Back at Front-End Components and Their Development
Covers the key components of web applications (MPAs, modules) and the evolution of front-end development environments (the emergence of bundlers).
Explains the difference between imperative and declarative programming.

_Chapter 2.
A look back at single-page applications
We cover the structure of SPAs, how they differ from MPA, and the advantages of SPAs, including reduced network call frequency, lazy loading, and increased productivity (separation of front-end and back-end development domains, declarative programming).

Chapter 3. A Look Back at the Phases of UI Components
Explains the importance of UI components, the role of design tools, and how object-oriented concepts such as abstraction, interfaces, and encapsulation apply to UI components.
Let's revisit the meaning of State and Props.

_Chapter 4.
Review status and responsiveness
Covers the distinction between client and server state, the role that state and reactivity play in front-end development, application architectures like MVC and MVVM, the observer pattern, and the concepts of two-way and one-way binding.

_Chapter 5.
A look back at the development environment
We cover the structure and principles of Node.js (V8 engine, event loop, Libuv, etc.), Node version managers (NVM, Volta, fnm, etc.), the importance and comparison of package managers (npm, Yarn, pnpm), the concept and advantages of monorepos, code quality tools (linters, formatters, static analyzers), and React build tools (Vite, ESBuild).

[Part 2] A Deep Dive into React's Core Elements

Chapter 6. Reviewing JSX Components
Learn about JSX, an essential tool for implementing React UI components, and its components, and whether JSX belongs as an external or internal DSL.

Chapter 7. Reviewing JSX's Core Grammar and JavaScript Transformation
JSX is a syntax extension used in React to declaratively design UI, and describes the process by which JSX is translated into JavaScript function calls that the browser understands.
Covers the concepts of single root element rules, conditional rendering, and synthetic events.

_Chapter 8.
React Refactoring and Key Props Review
Learn about React's rendering process (trigger, render, commit), virtual DOM, reconciliation, diffing algorithm, and the importance of key props.

_Chapter 9.
A Look Back at React Rendering Rules
We'll cover the rules that trigger React's rendering, correct misconceptions about re-rendering, and cover the principles of idempotence and immutability during the rendering process.

_Chapter 10.
A Look Back at React's Props and Component Patterns
We'll delve deeper into props, a core concept of React.
Explains various component design patterns such as prop immutability, nested components, component composition, and the render prop pattern.

_Chapter 11.
A Look Back at React's State and Batching
We'll delve deeper into state, a core concept in React.
We explain the concepts and necessity of local state, derived state, unidirectional/bidirectional data flow and binding, and automatic batching introduced in React 18.

_Chapter 12.
A Look Back at Fiber, the Root of React
This article provides an in-depth explanation of the limitations of legacy stack reconcilers, the introduction of fiber architecture to overcome them, the structure of fiber objects, and how fiber priorities and concurrency features are implemented.

[Part 3] A Deep Dive into Using React Hooks

_Chapter 13.
Reviewing the usage rules for React hooks
Explains the background of the introduction of hooks, the advantages of functional components over class components, and the main usage rules for hooks, including custom hooks starting with the use prefix (call only at the top level, call only within React functions, maintain immutability of arguments).

_Chapter 14.
A Look Back at React's Essential Hooks
We'll cover in detail how to use essential hooks like useState() and useEffect().
In particular, it highlights the importance of managing the dependency array of useEffect() , how it behaves in strict mode, and the need to respect idempotence.

_Chapter 15.
A Look Back at React Memoization
We cover memoization techniques to prevent unnecessary re-rendering.
We introduce the development history and goals (automatic optimization) of the React compiler, and also mention the importance of manual memoization.

_Chapter 16.
A Look Back at React Contexts, Error Boundaries, and Suspense
Covers advanced techniques for application stability and efficient data sharing.
We will cover error handling through error boundary components, the context API for solving prop drilling problems, accessing context and promise values ​​using the use() API, and the concept and use of suspense for asynchronous rendering.

_Chapter 17.
A Look Back at React Concurrency Features and Advanced Hooks
We'll cover how to use advanced lifecycle hooks like useLayoutEffect(), useInsertionEffect(), and useImperativeHandle(), and how to leverage React's concurrency features (transitions) to provide a smooth user experience.

[Part 4] A Look Back at the Technologies Surrounding React and Its Future

_Chapter 18.
A Look Back at React Rendering Patterns
Compare the basic concepts, pros and cons, and use cases of various React rendering patterns, including CSR, SSR, SSG, and ISR.
We explain in detail the background and rules of the latest concept, React Server Components (RSC).

_Chapter 19.
A Look Back at Next.js App Routers, Server Actions, and New React Hooks
We'll cover the basics of using the Next.js app router, the innovative server actions introduced in React 19, and their relationship to caching, static, and dynamic rendering.
We'll introduce React's evolution toward stronger integration with servers and learn about the new hooks added to React version 19.

Author's Note

Semiconductor design legend Jim Keller said this on popular podcast host Lex Fridman:

“Most people are only interested in the recipe (how to bake bread with flour, water, and yeast).
“I’m not really interested in the biology, material distribution, or thermodynamics that go into making bread.”

The same goes for front-end development.
If you just follow the recipes provided by the framework, you will soon reach its limitations.
This is especially true in the age of artificial intelligence, where learning speeds are exponentially faster.
This is like a developer learning how to use useState() and fetch() without understanding how React's state is updated, how JavaScript's event loop handles asynchrony, or the HTTP protocol and networking principles that are the foundation of the web.
I agree with Jim Keller.
If you understand the cooking itself, not just the recipe, you can make not only bread, but also omelets and sandwiches.

The development environment is changing much faster than before.
Now, AI creates components with the push of a button and even suggests design systems.
At first it was exciting, but at some point I started to feel uneasy.
I'm often surprised by the news of massive developer layoffs coming from Silicon Valley.
"What's the difference between the code I created and what Copilot created?", "Will I be replaced by an AI tool someday?"

Many developers hesitate before this question.
Development has become easier, but it also challenges us. While AI tools are undoubtedly excellent assistants, they fail to adequately address complex requirements or create nuanced experiences that captivate users.
It is at this point that the 'depth' of human developers shines.

This book is the starting point of a journey toward that 'depth'.
Even if you already know React, what really matters is not the superficial syntax, but the criteria for judging 'why it works that way', 'how it can be designed better', and 'what makes good code'.

You didn't pick up this book simply to become a good coder.
Because I want to grow into a developer who proactively solves problems without losing direction even in the age of automation.

Now we invite you to the deep world of 'Inside React'.
Build your skills on solid principles with this book and become a developer who can't be replaced by AI.
React will be the most powerful tool you can use to become that kind of developer.

* Come to 〈Naekobu〉!

If you need someone to discuss and research with, let's research together on Discord & KakaoTalk.
Ask questions about things you don't know and try to troubleshoot errors.
By visiting “Please Take Care of My Code: Naekobu,” you can share your know-how with other developers and gain more knowledge.

- Discord Inbox: discord.com/invite/BYRpaDrfbH
- KakaoTalk Naekobu: open.kakao.com/o/ggK7EAJh