Learning React.js with TypeScript: Complete Guide from Basics to Latest Technologies

Chapter 01
준비하기

리액트 학습을 시작하기 전에 필요한 환경 설정을 배웁니다.
각각의 OS별로 VSCode를 설치하는 방법을 살펴보고
Prettier 및 익스텐션을 설치하여 학습 준비를 합니다.

Chapter 02
시작하기

이 챕터에서는 리액트 애플리케이션을 최신 방식으로 시작하는 방법을 다룹니다. Create React App(CRA)을 대체하는 Vite 기반 개발 환경을 구성하며, 리액트 개발에 필요한 필수 설정을 익히게 됩니다.

• CRA의 한계와 Vite의 장점 비교

• Webpack과 Vite의 차이점과 생태계 흐름 이해

• Vite를 활용한 빠르고 직관적인 리액트 프로젝트 세팅

• 스니펫과 유저 스니펫을 통한 코드 생산성 향상

• 초기 프로젝트 구조 정리와 npm run dev 실행 흐름 파악

또한, 리액트에서 가장 중요한 JSX 문법의 개념과 특징을 소개합니다. JSX가 어떻게 HTML과 JavaScript를 결합하는지, 어떤 문법적 특징이 있는지를 이해하면서 이후 컴포넌트 학습을 위한 기초를 다지게 됩니다.

Chapter 03
컴포넌트 기본

리액트에서 컴포넌트는 UI를 구성하는 가장 작은 단위이자 핵심 개념입니다. 이 챕터에서는 컴포넌트가 무엇인지, 어떻게 동작하고 어떻게 구성되는지를 실제 코드와 함께 단계적으로 학습합니다.

• 컴포넌트란 무엇인가? 그리고 왜 중요한가?

• 함수형 컴포넌트의 작성 조건과 구성 방식

• React.Fragment를 이용한 불필요한 DOM 제거

• 새로운 컴포넌트를 만드는 방법과 폴더 구조 설계

• 루트 컴포넌트와 컴포넌트 트리 구조의 개념 이해

또한, 실습을 통해 직접 컴포넌트를 생성하고 적절한 위치에 배치하면서 컴포넌트 기반 설계에 대한 감각을 익히게 됩니다.
이 과정을 통해, 컴포넌트를 보는 눈이 달라지고, 이후의 복잡한 리액트 구조도 자연스럽게 이해할 수 있는 기반을 마련할 수 있습니다.

Chapter 04
컴포넌트의 데이터와 Props

이제 리액트의 핵심 개념 중 하나인 Props(속성)를 본격적으로 다룹니다. 이 챕터에서는 컴포넌트 간에 데이터를 어떻게 전달하고 활용하는지를 다양한 예제와 실습을 통해 익히게 됩니다.

• 리액트에서 컴포넌트 간 관계 이해: 조상-부모-자식 구조

• JSX 내에서 기본 타입과 참조 타입 데이터를 출력하는 방법

• 태그 속성에 값을 전달하는 기본 원리

• Props를 통해 데이터를 전달하는 다양한 방식과 패턴

• 비구조화 할당을 활용한 props 분리와 가독성 향상

• 타입스크립트를 기반으로 props의 타입을 쉽게 추론하고 명확히 정의하는 방법

• 전개 연산자(...)를 활용한 props 전달 방식 이해

• children이라는 특별한 prop을 활용한 컴포넌트 재사용성 확장

• props와 children의 역할 차이 비교

이 챕터를 통해, 리액트 컴포넌트 간의 데이터 흐름을 자연스럽게 이해하고, 타입 안정성과 가독성을 동시에 고려한 props 설계 역량을 키우게 됩니다.

Chapter 05
컴포넌트와 이벤트

리액트 애플리케이션에서 이벤트 처리는 사용자와의 상호작용을 구현하는 핵심입니다. 이 챕터에서는 버튼 클릭부터 이벤트 전파까지, 리액트에서 이벤트를 어떻게 다루는지 체계적이고 실용적인 관점으로 학습합니다.

• JSX 문법을 통한 이벤트 연결 방식

• 이벤트 속성과 이벤트 핸들러 함수의 작성 패턴

• 핸들러에 매개변수를 전달하는 다양한 방법과 추천 방식

• 핸들러 내부에서 props를 읽는 흐름과 실전 예시

• 상위 컴포넌트에서 핸들러를 props로 전달하는 구조

• 이벤트 객체(SyntheticEvent)의 구조 및 활용법

• target, currentTarget의 차이점과 용도

• 이벤트 전파 개념: 버블링과 캡처링의 이해

• 이벤트의 기본 동작 차단 방법 (e.preventDefault())

마지막으로 버튼 컴포넌트를 직접 만들고, 다양한 이벤트를 처리하는 실습을 통해 이벤트 처리 패턴을 자연스럽게 내재화합니다.

Chapter 06
컴포넌트 상태 - useState 훅

리액트의 상태 관리는 컴포넌트가 사용자와의 상호작용에 따라 반응하고 변화하도록 만드는 핵심 기능입니다. 이 챕터에서는 useState와 useReducer를 중심으로 상태 관리의 개념, 활용법, 실전 적용까지 폭넓게 다룹니다.

• 상태가 필요한 이유와 상태값의 기본 개념

• useState 훅의 기초적인 사용법부터 실전 적용까지

• 객체 및 배열 상태를 다룰 때 주의할 점과 리렌더링 동작 방식

• setState의 업데이트 방식과 함수형 업데이트

• 상태의 독립성 개념과 상태 끌어올리기(lifting state up)

• 캡슐화(encapsulation)를 통한 상태 관리 책임 분리

• 카운터 앱을 직접 만들어보며 상태 관리 실력을 점진적으로 강화

• useReducer를 이용한 복잡한 상태 로직의 구조화

• reducer 패턴으로의 전환 및 실전 미션 수행

이 챕터를 마치면, 단순한 상태 변경부터 복잡한 데이터 흐름까지 안정적으로 관리할 수 있는 리액트 개발자로 한층 성장하게 됩니다.

Chapter 07
반복&조건 렌더링

The actual user interface (UI) consists of a structure where the screen changes conditionally depending on the situation and repeatedly renders multiple data. This chapter focuses intensively on how to implement such UI in React.

🔹 Conditional Rendering

• if, switch, ternary operator(? :), logical operator(&&) and various other conditional expression methods

• Comparison of usage timing and pros/cons of each conditional method

• Traffic lights, login status, message output, and other real-world scenario-based practice

• Provides practical tips on nested conditions, readability, component separation strategies, and more

🔹 Repeated Rendering

• Component repetition output using map() based on array data

• Understanding the Importance and Valid Scope of the key Attribute in Repeated Rendering

• Combination of data filtering and conditional rendering using filter() and other methods

• Master repetition patterns through practical exercises such as rendering recipe lists

After completing this chapter, you'll be able to naturally implement complex conditions and iterations with React, and develop the skills to design readable dynamic UIs.

Chapter 08
스타일링

In this chapter, you will comprehensively learn various techniques for styling components in React.
From simple inline styles to CSS-in-JS, Tailwind, and image styling, you will master all the styling techniques frequently encountered in actual frontend development through hands-on practice.

🔹 Basics of Styling

• Utilizing Inline Styles and Global CSS

• Component-level style encapsulation through CSS modules

• Dynamic class management using the classnames utility

• 🧩Mission: Experience comparing various styling methods through button group UI implementation

🔹 CSS-in-JS — styled-components

• styled-components syntax and basic usage methods

• Dynamic styling using props

• keyframes, as and other advanced features, helper functions, and mixin usage

• Global Style Management and Tips Collection

• 🧩Mission: Create a Traffic Light UI with styled-components

🔹 Tailwind CSS — Utility-First Styling

• Tailwind's Core Philosophy and Directive System

• Conditional Class Application Methods and Practical Implementation Strategies

• 🧩Mission: Complete Calculator UI with Tailwind

• 🧩Bonus Mission: Add Tailwind's practical sense to challenge advanced UI!

🔹 Image & Font Styling

• Image Rendering Considerations and CSS Adjustment Methods

• 🧩Mission: Implement animated UI for lamp lighting up

• How to apply Google Web Fonts as well

Through this chapter, you'll develop the ability to determine which styling tools are suitable for your project and acquire practical skills for implementing beautiful and maintainable UI.

Chapter 09
계산기 만들기

This chapter is a hands-on project where you will directly implement an actual working calculator application based on everything you've learned so far. You'll experience everything firsthand, from component design, state management, event handling, type separation, to UI composition.

🛠 Project-Based Learning

• Project Overview: Calculator Operation Principles and Structure Before Starting

• UI Design and Component Structuring

• Organizing component roles and responsibilities through the refactoring process

• 🧩Use TypeScript to clearly separate state and operator types

• Implement key features such as numbers, operators, decimal points, clear, etc. directly

• Learning bug handling and debugging workflows frequently encountered in practice

🧪 Utilizing Development Tools

• React Developer Tools Installation and Usage to Visualize State Change Flow

• Real-time status tracking and component structure analysis capability enhancement

When you complete this chapter, you'll experience component separation, state design, debugging, and type management all at once, going beyond simple feature implementation, and gain confidence in React through "the joy of seeing features you built yourself actually work".

Chapter 10
폼다루기

This chapter contains practical considerations on how to handle forms in React. Beyond simple input processing, it comprehensively covers React 19's new features (ref forwarding), form logic reuse through custom hooks, and validation.

🔹 Controlled Components

• input, checkbox, radio, textarea 등 제어 컴포넌트 전반 실습

• Understanding State-Connected Input Processing Flow and Re-rendering

• 🧩Mission: Implement Form UI Combining Various Control Inputs

🔹 Uncontrolled Components

• Accessing input values through ref and DOM-based control methods

• Comparison of Advantages and Disadvantages of Controlled/Uncontrolled Methods and Integration Strategies

• 🧩Mission: Batch Processing Multiple Inputs Using Uncontrolled Components

🔹 React 19 Advanced Form Control

• ref as props: A new pattern (React 19)

• Separating complex input processing into custom hooks and increasing reusability

• Advanced Custom Hooks: Internal State Abstraction, Custom Validation Integration

🔹 Validation

• Required values, length, format, and other basic validation implementation patterns

• Writing Custom Validation Functions and Hook Integration

• 🧩Mission: Complete the Login Form
  → Input control + validation + state handling for comprehensive form practice

After completing this chapter, you'll move beyond simple input handling
to gain the ability to construct complex form flows and manage them with a clean, maintainable structure.
This is a decisive opportunity to acquire practical-level input control experience along with the latest React technologies.

Chapter 11
할 일 관리 앱

In this chapter, we'll implement a fully functional Todo management application based on the core React concepts we've learned so far.
This chapter allows you to experience the complete practical React development workflow from start to finish, including component separation, state management, event handling, list rendering, and edit/delete functionality.

🛠 Practical Implementation Content

• Starting from project setup to establishing the basic structure

• Implementing todo registration functionality through input forms

• Displaying a to-do list with list rendering

• Checkbox-based task completion marking and delete functionality added

• 🧩Master state updates and UI control logic through implementing todo edit functionality

✅ What you gain through hands-on practice

• Beyond simple API understanding, designing role separation and data flow between multiple components

• React app that operates centered on state - implementing the structure and flow from start to finish by yourself

• A mission-like complete project where you directly experience building a small-scale CRUD app

When you complete this chapter, you'll have a confident first project experience of designing and completing an app by combining various React features.

Chapter 12
Side Effects and Component Optimization Techniques

This chapter goes beyond React components simply "rendering" to cover side effect management including asynchronous operations, browser events, and external API handling as well as optimization strategies to reduce unnecessary rendering.

🔹 Side effect management (useEffect, useId, etc.)

• useId Hook for Accessibility Enhancement and Unique Identifier Generation

• 🧩Apply useId to a to-do management app to develop practical accessibility skills

• useEffect timing, dependency array principles, and other theory + practice

• 🧩Apply useEffect to Todo app to implement external data and state change response handling

🔹 컴포넌트 최적화 (React.memo, useCallback, useMemo)

• Preventing unnecessary re-rendering through React.memo

• Analysis of when memoization is cleared and the reasons behind it

• Differences between [[CODE_1]]useCallback[[/CODE_2]] and [[CODE_2]]useMemo[[/CODE_2]] and when to apply them

• 🧩Experience optimization by applying React.memo and useCallback to a to-do management app

🔹 고급 렌더링 전략 (lazy, suspense, error-boundary)

• Basic concepts of [[CODE_1]]lazy()[[/CODE_2]] and [[CODE_2]]Suspense[[/CODE_2]] for lazy loading components

• Loading UI Design and User Experience Enhancement Strategies

• Error handling with ErrorBoundary to protect the app from crashing when errors occur

After completing this chapter, you will be able to directly implement designs that consider performance and maintainability even within complex component structures,
and you will develop the React app operational skills required at the level demanded by real services.

Chapter 13
Context API

Want to handle deep data passing between components cleanly? Context API is the answer.
In this chapter, you'll learn the core concepts and usage of Context API as the foundation of global state management, and develop structured app development skills by applying it to real-world projects.

🔹 The Need for Global State and Context API Basics

• The need for global state to solve the props drilling problem

• Basic global state design using [[CODE_1]]createContext[[/CODE_2]] and [[CODE_2]]useContext[[/CODE_2]]

• Unnecessary rendering issues and structural improvement methods (memo, context separation)

• Efficiently manage complex global state by combining with reducer

• ✅Includes practice with patterns using two or more Contexts together

🧩 Hands-on: UserProfile State Management Project

• Initial UserProfile code analysis → State separation with context object

• 🧩Font size, theme, notification settings, language settings (i18n.ts) and other user environment settings managed as global state

• Control render order and layout responsiveness by utilizing useLayoutEffect together

• ✅Learning scalable global state architecture through Context API + custom hook design

🧩 Mission: Apply Context API to Todo App

• Introducing global state to existing todo app → improving component state sharing structure

• Configure multiple components to utilize the same state and strengthen practical design skills

Through this chapter, you'll move beyond simple component-level state management,
and be able to actually implement global state flow and management strategies that consider the entire app.

Chapter 14
Redux ToolKit

If you've grasped the concept of global state with Context API, now you'll experience Redux Toolkit (RTK) to build a more scalable and maintainable global state management structure.
This chapter focuses on hands-on learning of Redux Toolkit's core features so you can systematically manage complex state.

🔹 Redux Toolkit Theory + Setting Up Structure

• The Background of Redux Toolkit's Emergence and Differences from Traditional Redux

• Store Creation and Slice Structuring through createSlice

• Understanding state change flow, action dispatch, and re-rendering flow

• ✅Redux DevTools integration for state debugging

• Parameter passing, extending to asynchronous processing logic using thunk

• ✅Advanced structure practice for separating and merging multiple slices for management

🧩 Hands-on: UserProfile State Management with Redux

• Restructuring UserProfile state based on Redux

• 🧩Structure font size, notification settings, theme state, etc. in slice units

• Comparative experience of stronger structural control and maintainability compared to Context API

🧩 Mission: Apply Redux to Todo App

• Convert existing todo management app to Redux Toolkit-based

• ✅Implement Todo status, add/delete/modify logic in slice units

• Practical Component-Store Separation Strategy and Code Management Experience Enhancement

After completing this chapter, you'll move beyond simple state management
and reach "the level where you can directly implement structured global state management in slice units".
This is a highly recommended practical chapter for those who were curious about how to use Redux Toolkit in real-world projects.

Chapter 15
Zustand

Want to quickly create global state without complex setup?
In this chapter, we'll learn about Zustand, a lightweight and intuitive global state management library.
With a structure that's lighter than Redux and more powerful than Context, it's a state management alternative that's gaining increasing attention in real-world development.

🔹 Zustand from Basics to Practice

• Zustand의 개념과 철학: “Global store with minimal boilerplate”

• Basic Usage and State Definition Methods

• A structure that allows passing parameters to state and easily creating derived state

• ✅persist feature for persistent storage like localStorage

• ✅subscribeWithSelector Render Optimization Using

• ✅immerfor intuitive immutability management

• ✅devtools integration for easy debugging

🧩 Practice: Implementing UserProfile State

• Reimplementing UserProfile state based on Zustand

• Experience the differences in code volume, intuitiveness, and scalability compared to Redux/Context

🧩 Mission: Todo App Zustand Refactoring

• Convert existing todo app to Zustand-based

• ✅Direct implementation of various ways components use global state

• Provides experience implementing state change → UI render → save/restore flow with minimal code

After completing this chapter, you will become an expert who has experienced all three state management tools (Context API, Redux Toolkit, Zustand) and
gain practical standards and intuition to judge and select the appropriate global state tool for each situation.

Chapter 16
데이터 통신

Now it's time to turn your React app into a "living app".
In this chapter, you'll learn how to communicate with real servers and directly connect this to the PostBrowser mini project to complete the practical communication structure of React apps.

🔹 Basics of Data Fetching

• Basic Concepts and Structure of HTTP Communication

• json-server local API server setup → 🛠Hands-on API environment construction

• Thunder Client API Test Automation

• 📝db.json Complete hands-on practice with file structure notes provided

🔹 CRUD Practice Using fetch

• 기본 요청 (GET, POST, PUT, DELETE) 구조 익히기

• ✅ Includes practical elements such as loading states, error handling, and request cancellation (AbortController)

• 🧩Implement all practical CRUD operations with fetch and understand React integration flow

🔹 Advanced Fetching with axios

• axios basic usage to complete CRUD flow summary

• ✅Common instance configuration through axios.create()

• ✅Introduction to practical strategies including interceptors, error handling, and response structure integration

🧩 Hands-on Project: PostBrowser App

• Basic code provided → Apply data integration to React app

• Post rendering → pagination implementation → search functionality addition sequential completion

• ✅ Experience all aspects comprehensively through hands-on practice: state management, fetching flow, and UI update flow

After completing this chapter, you will have the ability to go beyond simple components and directly design and implement practical React applications that communicate with APIs.
This is the part that builds a solid foundation that can later be expanded to TanStack Query or advanced state management.

Chapter 17
데이터 통신 심화

This chapter focuses on form/async-related APIs introduced in React 19, and you'll learn
how to optimize data communication from a user experience perspective through feature-based practice + TMDB hands-on project.

🔹 React 19's Form Handling and Asynchronous Flow

• useTransition for Smooth UI State Transition Handling

• 🧩Hands-on learning through before and after comparison practice of Transition application

• useActionState, form action, useFormStatus through
  → Learning new form handling methods and server action flow

🔹 Utilizing the Latest UX Features

• Implementing optimistic UI with useOptimistic

• ✅ Modern UX design that reflects UI first without waiting for responses before asynchronous operations

• use() for Direct Promise-based Data Processing and Suspense Integration

• ErrorBoundary and Suspense combination for error + loading response strategy configuration

🧩 Hands-on: TMDB Movie App Development

• Movie list rendering → Paging → Implementation progression to infinite scroll

• 🧩Building a production-ready movie app with Suspense + use() + ErrorBoundary combination

• ✅Complete cycle experience of server communication integrated with user registration flow

After completing this chapter, you'll go beyond simple fetch or axios level
and reach a level where you can naturally integrate features that lead data UX in the React 19 era into real-world apps.
This is a highly recommended part for those who want to implement user-centered UI responsiveness and real-time apps.

Chapter 18
React Router v7

리액트 애플리케이션에서 라우터는 페이지 구조, 데이터 흐름, 사용자 이동 경험을 책임지는 핵심입니다.
이 챕터에서는 React Router v7의 최신 API들을 기반으로 SPA 구조를 설계하고,
라우팅 + 데이터 로딩 + 에러 핸들링까지 완전한 전환 흐름을 구축해봅니다.

🔹 라우팅 기초와 구조화

• 기본 설치 및 라우터 설정

• 중첩 라우트, 인덱스 라우트, 레이아웃 라우트 구성

• ✅라우트 프리픽스, 동적/옵셔널 세그먼트, 스플랫 등 실무형 경로 패턴 학습

• NavLink, Link를 활용한 UI 중심의 이동 제어

🔹 폼 & 내비게이션 동작

• 컴포넌트로 리액트 라우터 기반 폼 처리 이해

• navigate() 함수를 활용한 프로그래밍 방식 이동 처리

• ✅전통적인 form 제출 방식과 라우터 기반 접근의 차이 체험

🔹 데이터 패칭 + 로딩 + 에러 핸들링

• loader 속성을 통한 라우트 단위 데이터 패칭 흐름 설계

• loader에서 발생하는 비동기 요청 → 로딩 처리 → 에러 핸들링

• ✅loader + suspense, loader + errorElement 등 실전 구조 구현

이 챕터를 마치면, 리액트 앱의 페이지 설계부터 데이터 흐름, 사용자 경험까지
전반적인 SPA 구조를 스스로 설계하고 운영할 수 있는 프론트엔드 설계력을 얻게 됩니다.

Chapter 19
Final Project - SULOG

지금까지 학습한 컴포넌트 설계, 상태 관리, 데이터 통신, 사용자 경험 최적화, 인증 처리, 배포까지
모든 내용을 집약한 리액트 기반 풀스택 프로젝트의 완성 단계입니다.
이 챕터에서는 실제 서비스처럼 동작하는 블로그형 웹 애플리케이션을 직접 구현하고 배포까지 경험합니다.

🛠 백엔드 + 인증 구현

• MongoDB 설정 및 백엔드 API 연동

• ✅카카오 로그인 구현: 애플리케이션 등록부터 OAuth 플로우 전체 구성

• ✅자체 회원가입/로그인 구현: 폼 구성 + 서버 연동 + 상태 관리

• 토큰 인증, 에러 처리, 인증 흐름 디버깅 실습

🧩 게시글 기능 전체 구현

• 게시글 등록 → 이미지 첨부 프리셋 연동

• ✅ 수정, 삭제, 상세 보기 기능까지 모든 CRUD 흐름 실현

• 댓글 작성, 삭제, 렌더링 로직 → 상태 연동 및 리렌더링 처리

• ✅백엔드 수정 내용은 강의 노트로 함께 제공

🔁 페이지네이션 + 리스트 최적화

• 메인 게시글 목록을 페이지 단위로 불러오기

• ✅ 페이지네비게이션 컴포넌트를 직접 설계하여 실전 감각 강화

• 무한스크롤이 아닌 정형화된 페이징 처리 전략 이해

🎯 UI 다듬기 + 오류 보완 + 실제 배포

• 사용자 흐름에 맞춘 UI/UX 개선과 미비점 보완

• ✅ 프론트엔드 & 백엔드 각각 Vercel을 통한 실제 배포 실습

• 실 서비스 기준으로 도메인 구성, 이미지 최적화, 최종 점검까지

이 파이널 챕터를 마치면, 단순한 연습을 넘어
“스스로 사용자 인증 기반 웹 서비스를 구축하고 운영할 수 있는 개발자”가 됩니다.
강의를 통해 배운 모든 것을 완성된 하나의 서비스로 통합해보며 실력을 검증하세요!

다양한 실습

챕터별 수준에 맞게 구성된 최적화된 실습

디자인이 적용되지 않은 실습만 빼고, 디자인이 적용된 것만 소개할게요!

신호등(chapter 08)

램프(chapter 08)

계산기(chapter 09)

로그인(chapter 10)

할일 관리 앱(chapter 11)

사용자 설정(chapter 13)

Post Browser(chapter 16)

TMDB(chapter 17)

파이널(chapter 19) - 용량문제로 움짤 불가..ㅠ

디자인이 적용안된 예제까지 하면 수십개 +

이러한 밀도 높은 모든 예제들이 여러분들의 단계적인 학습을

완벽하게 도와줄 것이라고 자신합니다.

잠시만요!

강의에도 나와 맞는 '결'이 있다는 거 아시나요?

누구에게나 인정받는 대작 게임이 나에게는 재미없을 수 있는 것처럼,
강의도 모두에게 똑같이 맞는 건 아닙니다.

아무리 칭찬이 자자한 강의라도 나와 맞지 않을 수 있고,
반대로 누군가에겐 평범한 강의가 나에겐 최고의 강의가 될 수 있죠.

그래서 제 모든 강의는 최소 10% 이상 무료로 공개되어 있습니다.
직접 들어보고, 저와 스타일의 ‘결’이 맞는지 확인해 보세요!

만약 저와 결이 잘 맞는다면,
프런트엔드 개발자로 가는 가장 빠른 지름길을 안내해 드리겠습니다.
믿고 따라오세요!🚀