교재 목차

React를 배운다는 것은 컴포넌트를 만드는 문법보다, 상태를 어디에 두고 어떻게 흘려보낼지 설계하는 사고를 익히는 과정에 가깝습니다. 처음에는 화면이 나오기만 해도 충분해 보이지만, 기능이 늘어날수록 상태의 흐름이 코드의 구조를 결정합니다. 이 교재는 JSX와 컴포넌트에서 시작해 훅과 스타일링, 라우팅, 상태 관리, 비동기 데이터와 폼, 성능 최적화와 배포까지 11개 장으로 이어지며, 각 장에서는 어떻게 구현하는지와 함께 왜 그렇게 구현하는지를 설명하고 자주 하는 실수와 디버깅의 단서도 함께 다룹니다.

예제는 Vite 8로 만든 React 19 프로젝트를 기준으로 하며, 라우팅은 React Router 8.5의 Declarative 모드(react-router 패키지), 상태 관리는 Redux Toolkit 2.13, 스타일링은 styled-components 6.6, 데이터 요청은 Axios 1.x와 로컬 목 API인 json-server 1.x를 씁니다. 각 도구가 요구하는 Node.js 버전과 설치 명령은 해당 글에 적어 두었습니다. 본문에 실은 실행 결과와 화면, 콘솔 출력은 React와 각 도구의 공식 문서에 적힌 동작을 따라 손으로 따져 본 예상값이며, 실제로 실행해 옮긴 출력은 아닙니다. 예제를 볼 때는 먼저 결과를 예상한 뒤 본문과 비교하고, 직접 실행해 다르게 나오면 어느 단계에서 갈라졌는지 따라가 보세요.

---

첫 목표: 첫 번째 React 앱 띄우기

웹 개발의 변화와 React의 등장과 React의 핵심 개념과 장점을 읽고, 개발 환경 설정에서 Node.js와 편집기를 준비해 Vite로 React 프로젝트를 만듭니다. 이어 첫 번째 React 앱 만들기에서 index.html과 main.jsx, App.jsx가 어떻게 이어져 화면이 그려지는지 확인하고, App.jsx를 고쳐 저장했을 때 브라우저에 바로 반영되면 첫 목표를 마친 것입니다. 화면이 바뀌지 않으면 개발 서버가 실행 중인지와 터미널에 나온 주소를 열었는지, 브라우저 개발자 도구의 Console에 오류가 있는지부터 확인하세요.

이 교재는 HTML과 CSS, JavaScript의 기초를 안다고 가정합니다. 변수와 함수, 배열 메서드, Promise와 모듈이 낯설다면 웹 입문 교재의 해당 글로 돌아가 복습하세요. 특히 변수, 데이터 타입, 연산자에서 시작하는 5장과 비동기 프로그래밍은 React 코드를 읽는 데 자주 필요합니다.

---

학습 경로

교재 전체를 읽는다면 다음 다섯 단계를 차례로 따라가세요. 대부분의 장은 마지막 글에서 그 장의 내용을 모은 작은 실습을 만듭니다.

1단계 · React의 기초(1–3장)에서는 웹 개발의 변화와 React가 등장한 배경, 개발 환경과 첫 앱에서 시작해 JSX 문법과 컴포넌트, props로 데이터를 넘기는 방법, state와 이벤트 처리를 익힙니다. 이어 조건부 렌더링과 리스트의 key, 폼의 기초와 컴포넌트의 생명주기를 배우고, 할 일 목록 앱으로 이를 모읍니다.

2단계 · 훅과 스타일링(4–5장)에서는 useState와 useEffect를 깊이 다루고 useContext와 useReducer, 커스텀 훅으로 로직을 나누는 방법을 익힌 뒤, 인라인 스타일과 CSS 클래스, CSS 모듈, styled-components, 반응형 디자인으로 화면을 다듬어 반응형 카드 목록을 만듭니다.

3단계 · 라우팅과 상태 관리(6–7장)에서는 SPA의 개념과 React Router의 사용법, 경로 매개변수와 쿼리 문자열, 중첩 라우팅으로 여러 화면을 잇는 블로그 SPA를 만들고, 컴포넌트 사이에 상태를 나누기 어려운 이유에서 출발해 Context API와 useReducer, Redux의 기초 개념으로 공유 상태를 관리하며 테마 변경 기능을 구현합니다.

4단계 · 비동기 데이터와 폼(8–9장)에서는 자바스크립트의 비동기 처리와 useEffect로 데이터를 가져오는 방법, 로딩과 오류의 처리, Axios를 익혀 게시판의 조회와 추가, 삭제를 만들고, 제어와 비제어 컴포넌트, 복합 폼의 상태 관리와 유효성 검사를 거쳐 React Hook Form과 Yup으로 회원가입 폼을 만듭니다.

5단계 · 성능과 배포(10–11장)에서는 React Developer Tools로 렌더링 비용을 측정하고 불필요한 리렌더링을 React.memo, useCallback, useMemo로 줄이는 방법을 익힌 뒤, 앱을 빌드해 정적 호스팅에 배포하고 CI/CD의 기초와 다음 학습 경로를 살펴보며 최종 프로젝트로 마무리합니다.

장마다 다루는 예제와 시작 상태가 다르므로, 하나의 앱을 11장 내내 이어서 완성하는 과정으로 보지는 마세요. 필요한 기능부터 골라 읽을 때도 해당 글이 전제하는 개념과 제공하는 파일을 먼저 확인합니다. 패키지 버전은 글에 적힌 조건을 살피고, 실습하는 시점의 공식 문서와 비교하세요.

다른 교재로 이어 가기

React 코드에 타입을 더하고 싶다면 타입스크립트로, 서버 렌더링과 라우팅까지 갖춘 프레임워크로 넓히고 싶다면 Next.js로 이어 갑니다. 8장에서 쓴 목 API 대신 실제 서버를 만들고 싶다면 NestJS나 Spring을, HTTP 요청과 응답이 네트워크에서 어떻게 오가는지 더 알고 싶다면 네트워크를 참고하세요.

---

장별 목차

---

만든 앱을 돌아볼 때

기능을 하나 더할 때마다 그 값이 어느 컴포넌트의 state에 있고, 어떤 props나 Context를 거쳐 화면에 닿는지 설명해 보세요. 값이 기대와 다르면 React Developer Tools의 Components 탭에서 그 값을 가진 컴포넌트를 거슬러 올라가고, 화면이 느리면 Profiler 탭에서 같은 동작을 기록해 어느 컴포넌트가 얼마나 렌더링되는지 확인합니다. 데이터를 가져오는 화면이라면 로딩과 빈 결과, 오류, 성공의 네 상태를 모두 보여 주는지, 폼이라면 잘못된 입력과 서버의 거절을 사용자가 고칠 수 있게 안내하는지도 살펴봅니다.

React 트랙을 마무리할 때는 문법 하나하나를 외웠는지보다, 한 화면의 흐름 전체를 상태의 위치와 데이터의 이동, 실패의 처리로 설명할 수 있는지를 확인하세요. 그 설명이 막히는 지점이 다음에 돌아가 읽을 장입니다.