리액트: 입문에서 Next.js · TypeScript · 풀스택까지 책 표지
책

리액트: 입문에서 Next.js · TypeScript · 풀스택까지

React 19 + App Router + TypeScript 우선, 한 권으로 끝내는 리액트

연재 중 35장마지막 업데이트: 2026년 5월 19일
1장부터 시작 →

1~34장 + 부록 A까지 35장 모두 사이트에서 바로 읽으실 수 있습니다. 어느 챕터부터 시작해도 좋고, 아래 “추천 진입점"에서 본인 배경에 맞는 시작점을 안내드립니다.

이 책이 다루는 것 #

  1. 2026 시점의 리액트 표준 — function component와 훅만. Class component / componentDidMount / Redux-only / Pages Router는 본문에 등장하지 않습니다. App Router와 Server Components를 기본 모델로 합니다.
  2. TypeScript 우선 — 모든 예제 코드에 타입을 함께 붙입니다. props · 훅 · 이벤트 · 폼 · API 응답 타이핑을 처음부터 다룹니다.
  3. 입문에서 풀스택까지 단절 없는 곡선 — JSX부터 Server Actions · 인증 · 배포 · 관측성까지 같은 어조로 이어집니다.
  4. 운영을 회피하지 않음 — 테스팅 · 성능 · 인증 · 배포 · 관측성처럼 “실제 일에 필요한” 영역을 입문서 끝에서 다룹니다.
  5. 마지막에 한 풀스택 앱으로 엮음 — 6부 캡스톤에서 1~33장의 모든 도구가 하나의 Todo 앱 안에서 어떻게 맞물리는지 13단계로 보여 줍니다.

이 책에서 다루지 않는 것 #

  • React Native · Remix · TanStack Start 같은 다른 메타프레임워크 — 별도 책에서 다룹니다.
  • 디자인 시스템 · 애니메이션 · WebGL 같은 도메인 응용 — 별도 책에서 다룹니다.
  • Class component · componentDidMount · Redux Saga · Pages Router 같은 옛 스타일 — 옛 리액트 기초 강좌 15편이 그대로 남아 있습니다. 옛 코드베이스에서 옮겨오시는 분은 부록 A를 가장 먼저 읽으시면 됩니다.
  • 모든 라이브러리 망라 — 본문은 한 가지 답을 단정합니다. 대안 비교는 부록 또는 별도 글에서 다룹니다.

이런 분께 추천합니다 #

  • 리액트를 처음 배우는 분 — 한국어 입문서의 “App Router · Server Components · React 19 부재"가 답답한 입문자. 처음부터 모던 스택으로 시작합니다.
  • 옛 리액트 (Pages Router · Class component · Redux-only)를 알지만 최신 리액트 흐름은 아직 낯선 분 — 2019~2022 시대에 배운 뒤 멈춰 있던 분. 부록 A의 옛 리액트 마이그레이션 가이드가 출발점이 됩니다.
  • 다른 프레임워크 (Vue · Angular · Svelte)를 알고 리액트로 넘어오시는 분 — 입문부를 빠르게 건너뛰고 3~6부에서 핵심을 흡수하실 수 있습니다. TypeScript 우선이라 진입 마찰이 적습니다.
  • 사이드 프로젝트 / 1인 풀스택 개발자 — 백엔드 / 프론트엔드 분업 없이 한 사람이 풀스택을 책임지는 분. RSC + Server Actions 모델이 가장 큰 가치를 줍니다.

다음 분들에게는 이 책이 적합하지 않을 수 있습니다.

  • 이미 React 19 + App Router로 production을 운영 중이신 분 — 본문은 입문 ~ 중상급. 이미 손에 익은 분은 부록 A의 마이그레이션 정리 정도만 참고 자료로 쓸 수 있습니다.
  • 2026 시점의 옛 스타일을 유지해야 하는 코드베이스 담당자 — Pages Router / Class component를 한동안 유지해야 하는 환경이라면 옛 강좌 시리즈가 더 맞습니다.

이 책의 구조 — 6부 35장 한눈에 #

전체 분량은 본문 1~34장 + 부록 A 1장으로 35장입니다. 각 부의 끝에서 손에 박히는 것이 무엇인지 한 줄로 정리해 두었습니다.

  • 1부 리액트 시작 (9장) — JSX · 컴포넌트 · props · state · 이벤트 · 폼. 작은 상호작용 페이지를 직접 만들 수 있습니다.
  • 2부 효과 · 상태 · 라우팅 (6장) — useEffect · 상태 끌어올리기 · Context · 커스텀 훅 · 성능 최적화 · 라우팅. 다중 페이지 앱으로 확장됩니다.
  • 3부 TypeScript와 함께 (6장) — props · 훅 · 이벤트 · 폼 · Context · fetch 응답 타이핑. 모든 코드에 타입을 붙이는 감각이 자연스럽게 익습니다.
  • 4부 모던 Next.js (7장) — Why Server Components · App Router · Server vs Client · 데이터 페칭과 캐싱 · Suspense · Server Actions · React 19 신기능. 풀스택 React의 표준 모델을 익힙니다.
  • 5부 운영 · 테스트 · 배포 (5장) — Vitest · Playwright · 성능과 Web Vitals · 인증과 세션 · 배포와 관측성. 출시 전후에 필요한 도구를 한 번에 익힙니다.
  • 6부 종합 실습 (1장) — 풀스택 Todo 앱 캡스톤. 1~33장의 모든 도구가 13단계 PR 단위 흐름으로 한 서비스 안에서 맞물립니다.
  • 부록 A (1장) — 옛 리액트 코드 마이그레이션. Class → function + 훅, Pages → App Router, Redux-only → RSC + Server Actions, fetch-on-mount → RSC fetch, PropTypes → TS, 그리고 대규모 코드베이스용 6단계 점진 절차.

학습 경로 — 어디서 시작할까 #

배경에 따라 권장 진입점이 다릅니다.

  • 리액트를 처음 배우는 분 — 1장부터 차례대로. 1~2부에서 작은 앱을 익힌 뒤 3부 TypeScript로 같은 코드를 다시 한 번 타입과 함께 적습니다. 4~5부에서는 운영 환경까지 다루고, 6부 캡스톤에서 최종 목표를 완성합니다.
  • 옛 리액트를 아시는 분 — 부록 A를 먼저 읽으시면 지금까지 사용했던 예전 코드 방식이 본문과 어떻게 연결되는지 한눈에 보입니다. 그다음 4~6부 (App Router · RSC · Server Actions · 캡스톤)를 읽으시면 가장 큰 가치를 얻을 수 있습니다. 1~3부는 빠르게 복습하시면 됩니다.
  • 다른 프레임워크 출신 — 1부 (JSX · 컴포넌트 모델)는 한 시간 정도로 가볍게 살피고, 3부 (TypeScript)를 거쳐 4부 (Next.js + RSC)로 바로 넘어가세요. 5~6부에서 실전 도구를 만나면 지금 쓰는 프레임워크의 대응 개념과 비교하기 쉽습니다.

평균 소요 시간은 다음 정도로 잡으시면 됩니다 (코드를 손으로 따라 적으시는 기준).

영역시간
1~2부 (입문 ~ 라우팅)약 20~25시간
3부 (TypeScript)약 8~10시간
4부 (App Router + RSC)약 12~15시간
5부 (운영 도구)약 8~10시간
6부 캡스톤약 10~15시간 (직접 PR 단위로 진행 시)
부록 A약 3~4시간 (참고 + 직접 해보기)
합계약 60~80시간

하루 2시간씩이면 한 달, 주말에 집중하면 두 달 안에 한 사이클이 가능합니다. 캡스톤은 PR 단위로 더 천천히 진행하시는 분도 많습니다.

추천 진입점 — 어디서 시작할까 #

35장 모두 자유롭게 읽으실 수 있지만, “어디부터 시작해야 할지” 막막하신 분을 위해 세 진입점을 추천합니다.

  • 1장 React 란 무엇이고 왜 만들어졌는가 — 책의 출발점. 리액트가 무엇이고 2026 시점에 왜 여전히 프론트엔드의 표준인지를 짚습니다. 입문자분이 가장 먼저 펼치실 챕터입니다.
  • 28장 React 19 신기능 정리 — Actions · useActionState · useOptimistic · use() · ref-as-prop · <form action> 같은 React 19의 핵심 변경을 한 페이지에 모아 정리한 챕터입니다. modern 흐름이 궁금하신 분에게 가장 직접적인 챕터입니다.
  • 부록 A 옛 리액트 코드 마이그레이션 — Class → function, Pages → App Router, Redux-only → RSC + Server Actions, fetch-on-mount → RSC fetch, PropTypes → TS. 옛 리액트 사용자분 께서 이 책에서 가장 큰 가치를 가져가는 챕터입니다.

이 세 챕터는 각 진입점의 역할을 합니다. 마음에 드는 챕터부터 자유롭게 펼쳐 읽어 보세요.

책의 바탕이 된 시리즈 #

이 책은 다음 시리즈 32편을 바탕으로, 신규 8장과 전체 개정을 더해 다시 엮은 책입니다. 아래 시리즈는 지금도 사이트에 무료로 남아 있습니다.

  • 리액트 기초 강좌 15편 — 2019~2022 시대의 입문 시리즈. Class component와 Pages Router를 그대로 보존합니다. 이 책의 1~2부와 흐름은 비슷하지만, 옛 스타일을 다루는 시각의 차이가 분명합니다.
  • 타입스크립트 + React 실전 6편 — 3부의 컴파일 소스. 책에서는 같은 토픽을 React 19와 부록 A의 마이그레이션 힌트와 함께 다시 씁니다.
  • 모던 리액트 + Next.js 6편 — 4부의 컴파일 소스. App Router · Server Components · Server Actions의 첫 정리.
  • 리액트로 Todo 앱 만들기 5편 — 6부 캡스톤의 모티프. 단순 클라이언트 Todo가 풀스택 Todo로 어떻게 변형되는지 책에서 비교할 수 있습니다.

책은 위 시리즈를 입문부터 실전까지 이어지게 다시 엮고, 테스트 · 성능 · 인증 · 배포 · 풀스택 capstone 챕터를 더해 한 권으로 묶었습니다. 핵심은 30% 이상 신규/개정 + 풀스택 캡스톤입니다.

이 책의 운영 #

이 책은 사이트 광고 (AdSense)와 독자 후원으로 운영됩니다. 결제 / 구매 절차는 두지 않았으며, 35장 본문 전체는 사이트에서 그대로 읽으실 수 있습니다.

책의 한 챕터가 도움이 되셨다면 Ko-fi에서 후원해 주실 수 있습니다. 후원은 다음 minor 개정과 후속 책 집필의 시간을 만들어 줍니다.

❤️ Ko-fi에서 후원하기 ($1~)

자주 묻는 질문 #

학습 환경으로 무엇이 필요한가요 #

Node.js 20 이상, pnpm (또는 npm / yarn), 그리고 코드 에디터 한 가지면 충분합니다. 4~5부의 DB / 인증 / 배포 챕터에서는 무료 한도 안에서 쓸 수 있는 서비스 (Turso 또는 Cloudflare D1, GitHub OAuth, Vercel, Sentry, PostHog)만 사용합니다. 결제가 발생하는 단계는 본문 안에 없습니다.

책의 코드는 어디서 받을 수 있나요 #

각 챕터의 예제 코드는 본문 안 코드 블록으로 직접 적혀 있어, 손으로 따라 적으시는 학습 방식을 권장합니다. 6부 캡스톤의 13단계 완성본은 GitHub 저장소로 별도 제공될 예정입니다. 준비되면 이 책 소개 페이지에 링크를 추가합니다.

React 19 / Next.js 15 다음 버전이 나오면 책이 폐기되나요 #

핵심 모델 (function + 훅, App Router, RSC + Server Actions, TypeScript first)은 적어도 다음 2~3년의 메이저 버전 동안 그대로 유지될 것으로 봅니다. 변경된 API가 누적되면 책의 minor 개정(예: v1.1)으로 반영하고, 메이저 버전(예: React 20) 출시 시점에는 v2 책 라인을 별도로 시작할 수 있습니다.

한국어 외 언어로도 볼 수 있나요 #

ko가 1차입니다. ja / en 정합은 별도 마일스톤으로 계획되어 있습니다. 세 언어 모두 같은 책 구조 (35장)를 유지합니다.

책의 한 챕터가 사이트의 한 글과 70% 이상 같지 않나요 #

일부 챕터는 컴파일 소스 시리즈 글과 토픽이 같습니다. 다만 책 챕터는 (1) 책 흐름에 맞게 재서술, (2) React 19 + App Router + TypeScript 기준으로 통일, (3) 책 안의 다른 챕터와 cross-link, (4) 연습문제와 한 줄 요약 추가로 다시 써서, 같은 토픽이라도 결과물은 다른 자료에 가깝습니다. 중복이 큰 챕터는 SEO 충돌이 없도록 canonical 처리로 분리합니다.

후원 / 피드백은 어떻게 보내나요 #

피드백은 블로그를 통한 댓글 또는 이메일로 환영합니다. 챕터별 오타 / 개선 제안 / 코드 오류 보고는 다음 minor 개정에 빠르게 반영됩니다. 후원은 Ko-fi 채널을 두고 있으며, $1부터 자유롭게 보내주실 수 있습니다.

다음 단계 #

이 책의 ko 35장은 모두 공개됐습니다. 앞으로의 갱신은 다음과 같이 진행됩니다.

  1. v1 본문 안정화 — 출시 후 4~8주 동안 독자 피드백을 받아 오타 / 코드 오류 / 미흡한 설명을 minor 개정 (v1.x)으로 반영합니다.
  2. 6부 캡스톤 GitHub 저장소 — 13단계 완성본을 별도 저장소로 정리해 이 책 소개 페이지에 링크를 추가합니다.
  3. ja / en 정합 — 같은 35장 구조로 번역합니다. ko 출시 후 별도 마일스톤으로 진행합니다.
  4. React / Next.js 메이저 버전 출시 대응 — minor 개정을 누적한 뒤 v2 책 라인을 시작할 시점을 정합니다.

새 챕터 / 메이저 개정 알림은 RSS 피드로 받아보실 수 있습니다.

목차

1부 리액트 시작 9 장

JSX · 컴포넌트 · State · 이벤트 · 폼. 입문자가 손에 익혀야 할 9개 토픽.

  1. 1. 리액트란 무엇인가 리액트가 무엇이고 왜 만들어졌는지를 짚고, 2026 시점에 왜 여전히 (그리고 어떻게) 프론트엔드의 표준으로 남아 있는지를 정리합니다. 이 책의 출발점입니다.
  2. 2. 개발 환경 설정 (Node.js + Vite) Node.js와 pnpm을 깔고 Vite로 첫 리액트 프로젝트를 만들어 dev server를 띄웁니다. 이 책의 모든 예제가 이 환경 위에서 동작합니다.
  3. 3. JSX의 본질 JSX가 무엇이고 어떻게 JavaScript 함수 호출로 변환되는지, 그리고 표현식·속성·자식 노드의 규칙을 한 번에 다룹니다.
  4. 4. 컴포넌트와 props 함수 컴포넌트를 만들고 props로 데이터를 흘리는 기본 패턴을 살펴봅니다. 17장에서 TypeScript로 굳힐 인터페이스의 토대입니다.
  5. 5. State와 useState 리액트가 다시 그리는 단위로서의 state. useState의 정확한 모델과 함수형 업데이트, 객체 상태 갱신 패턴을 살펴봅니다.
  6. 6. 이벤트 핸들링 리액트의 합성 이벤트 시스템과 이벤트 핸들러 작성, 인자 전달, 흔한 함정을 살펴봅니다. 19장 이벤트 타이핑과 27장 Server Actions의 토대입니다.
  7. 7. 조건부 렌더링 if · 삼항 · && · null 반환으로 UI를 갈라 그리는 패턴과 흔한 함정 — 특히 `&&` 왼쪽의 숫자 0 함정을 정리합니다.
  8. 8. 리스트와 key 배열을 컴포넌트로 매핑하는 패턴과 key의 의미, 그리고 인덱스를 key로 쓰면 망가지는 실제 예시를 살펴봅니다.
  9. 9. 폼 다루기 (controlled inputs) 리액트에서 폼을 다루는 정석 패턴인 controlled component를 살펴봅니다. textarea · select · checkbox · radio 모두 같은 모델로 다루는 법까지.
2부 효과 · 상태 · 라우팅 6 장

useEffect · 상태 끌어올리기 · useContext · 커스텀 훅 · 성능 최적화 · 라우팅. 작은 페이지에서 다중 페이지 앱으로.

  1. 10. useEffect — 사용 시점과 회피 시점 부수 효과의 정의, 의존성 배열, cleanup의 역할, 그리고 useEffect를 쓰지 말아야 할 경우를 함께 정리합니다.
  2. 11. 상태 끌어올리기 (lifting state up) 두 형제 컴포넌트가 같은 데이터를 공유할 때 쓰는 핵심 패턴. 언제 끌어올리고 언제 안 끌어올리는지, 그리고 12장 useContext로의 자연스러운 다리까지 다룹니다.
  3. 12. useContext — 적절한 경우와 부적절한 경우 prop drilling을 풀어 주는 Context API. 사용 3단계 · value 분리 패턴 · 외부 상태 라이브러리와의 경계까지 다룹니다.
  4. 13. 커스텀 훅 로직 재사용의 표준 도구. 좋은 훅의 인터페이스 형태, 자주 만드는 패턴들, 그리고 훅으로 빼지 말아야 할 경우까지 짚습니다.
  5. 14. 성능 최적화 (memo · useMemo · useCallback · 그리고 React Compiler) memo / useMemo / useCallback의 역할과 흔한 오용을 정리하고, React Compiler 도입 후 무엇이 바뀌고 무엇이 그대로 남는지까지 짚습니다.
  6. 15. 라우팅 개요 (React Router) SPA의 라우팅 개념, React Router v7의 기본 사용법, 그리고 4부 Next.js App Router와의 동작 방식 비교를 한 번에 다룹니다.
3부 TypeScript와 함께 6 장

props · 훅 · 이벤트 · 폼 · Context · fetch 응답 타이핑. 모든 코드에 타입을 붙이는 감각.

  1. 16. TypeScript + React 셋업 Vite + TypeScript 셋업, tsconfig 핵심 옵션, 첫 .tsx 파일까지. 이 책의 3부 토대를 만듭니다.
  2. 17. props와 children 타이핑 props 타입 정의 패턴, ReactNode와 ReactElement와 JSX.Element 차이, PropsWithChildren을 쓰는 경우, discriminated union까지 한 번에 다룹니다.
  3. 18. hooks 타이핑 — useState · useReducer · useRef 빌트인 hook들의 타입 추론과 명시 시점. useReducer의 discriminated union 액션, useRef의 두 갈래(DOM ref와 값 보관), 그리고 React 19 ref-as-prop까지 다룹니다.
  4. 19. 이벤트와 폼 타이핑 ChangeEvent · FormEvent · KeyboardEvent와 입력 핸들러의 타입, controlled · uncontrolled 폼의 TypeScript 패턴, 그리고 27장 Server Actions FormData의 토대까지 다룹니다.
  5. 20. Context와 제네릭 컴포넌트 Context 타입 안전성 패턴(null + wrapper 훅), state·dispatch 분리, 제네릭 컴포넌트, 그리고 다형 컴포넌트의 as prop까지 한 번에 다룹니다.
  6. 21. fetch와 API 응답 타이핑 외부 데이터를 안전하게 다루는 흐름 — fetch는 unknown, zod 스키마로 검증과 타입을 동시에. 그리고 RSC 환경에서 fetch가 가지는 의미까지 짚어 4부로 이어집니다.
4부 모던 Next.js 7 장

App Router · Server Components · 데이터 페칭과 캐싱 · Suspense · Server Actions · React 19 신기능. 풀스택 React의 표준 모델.

  1. 22. 왜 Next.js와 Server Components 인가 클라이언트 사이드 리액트의 한계와 Server Components가 풀어내는 문제, CSR · SSR · RSC의 차이를 정리합니다. 이 책 전체의 회전점이 되는 챕터입니다.
  2. 23. Next.js 시작과 App Router Next.js 15 프로젝트를 만들고 App Router의 파일 기반 라우팅과 layout 시스템을 손에 익힙니다. 파일 규약(page · layout · loading · error · not-found · route group)을 한 번에 다룹니다.
  3. 24. Server Components vs Client Components 두 종류의 컴포넌트 차이, `use client` 디렉티브의 정확한 의미, 둘을 섞어 쓰는 패턴(서버가 클라이언트를 import / 클라이언트가 서버를 children으로 받기), 그리고 props 직렬화 제약까지.
  4. 25. 데이터 페칭과 캐싱 Server Component에서 `async / await`로 데이터를 직접 가져오는 패턴, Next.js 15의 fetch 캐시 옵션 (`force-cache` / `no-store` / `revalidate`), 라우트 레벨 옵션, 그리고 병렬 페칭과 `error.tsx`까지.
  5. 26. Suspense와 use()로 로딩 처리 Suspense의 경계 모델로 streaming 렌더링을 만들고, `loading.tsx` · skeleton fallback · 리액트 19에서 안정화된 `use()` 훅까지 정리합니다.
  6. 27. Server Actions와 폼 Server Actions로 API 라우트 없이 mutation을 처리하고, React 19의 `useActionState` · `useFormStatus` · `useOptimistic`으로 UX를 다듬는 패턴. 4부 마무리 미니 프로젝트 (방명록)까지.
  7. 28. React 19 신규 기능 정리 Actions · useActionState · useFormStatus · useOptimistic · use() · React Compiler · ref as prop. 22~27장에 흩어져 등장한 React 19 신기능을 한곳에 묶어 정리합니다.
5부 운영 · 테스트 · 배포 5 장

Vitest · Playwright · 성능과 Web Vitals · 인증과 세션 · 배포와 관측성. 실제 일에 필요한 영역.

  1. 29. 컴포넌트 테스팅 — Vitest + Testing Library Vitest + React Testing Library로 컴포넌트와 훅 테스트. render · userEvent · mocking 패턴, Next.js 환경에서의 주의점, CI 통합까지.
  2. 30. E2E 테스팅 — Playwright Playwright로 실제 브라우저에서 풀 시나리오 자동화. 셋업, locator 규칙, 인증 storageState, 페이지 객체 패턴, flaky 다루기, CI 통합과 시각 회귀까지.
  3. 31. 성능 · 번들 · Web Vitals Core Web Vitals (LCP · INP · CLS) 측정과 개선. Lighthouse · bundle 분석 · code splitting · RSC streaming · next/image · next/font · INP 최적화까지.
  4. 32. 인증과 세션 — Auth.js v5 / OAuth / JWT JWT와 DB session의 선택 기준, Auth.js v5 셋업, Credentials와 OAuth provider, RSC · Client · Server Action · middleware 네 곳에서 세션을 읽는 패턴.
  5. 33. 배포와 관측성 — Vercel · Cloudflare Pages · Sentry · PostHog Next.js를 Vercel과 Cloudflare Pages에 배포, preview deploy, 환경변수, Sentry로 에러 추적, PostHog로 제품 분석. 출시 후 4주를 위한 도구 한 세트.
6부 종합 실습 1 장

RSC + Server Actions + DB + 인증 + 테스트로 풀스택 Todo 앱 완성.

  1. 34. 종합 실습 — 풀스택 Todo 앱 완성하기 1~33장의 패턴을 하나의 동작하는 풀스택 서비스로 엮습니다. RSC · Server Actions · DB · 인증 · 테스트까지.
부록 1 장

옛 리액트 (Class · Pages Router · Redux-only) 코드를 modern 스타일로 옮기는 가이드.

  1. 100. 옛 리액트 코드 마이그레이션 Class component / Pages Router / Redux-only / fetch-on-mount 같은 옛 스타일 코드를 이 책의 modern 스타일로 옮기는 가이드.
X