목차

• 제 1 부 React 기초
• 1장 React 살펴보기
• 1.1 React란 무엇인가?
• 1.2 React가 해결할 수 있는 문제
• 1.3 React의 장점
• 1.3.1 간결성
• 1.3.2 속도와 테스트 용이성
• 1.3.3 React의 폭넓은 개발 커뮤니티와 생태계
• 1.4 React의 단점
• 1.5 웹 애플리케이션에 React 적용하기
• 1.5.1 React 라이브러리와 렌더링 대상
• 1.5.2 단일 페이지 애플리케이션과 React
• 1.5.3 React 개발 스택
• 1.6 첫 번째 React 앱 만들기: Hello World
• 1.7 퀴즈
• 1.8 요약
• 1.9 퀴즈 정답
• 2장 React 첫걸음
• 2.1 엘리먼트 중첩
• 2.2 React 컴포넌트 클래스 생성
• 2.3 React 속성 사용하기
• 2.4 퀴즈
• 2.5 요약
• 2.6 퀴즈 정답
• 3장 JSX
• 3.1 JSX의 정의와 장점
• 3.2 JSX의 이해
• 3.2.1 JSX로 React 엘리먼트 생성하기
• 3.2.2 React 컴포넌트에 JSX 사용하기
• 3.2.3 JSX에서 변수 출력하기
• 3.2.4 JSX에서 속성 사용하기
• 3.2.5 React 컴포넌트 메서드 생성하기
• 3.2.6 JSX의 if/else 처리
• 3.2.7 JSX의 주석 작성 방법
• 3.3 Babel을 이용한 JSX 트랜스파일러 설정하기
• 3.4 React와 JSX의 까다로운 부분
• 3.4.1 특수문자
• 3.4.2 data- 속성
• 3.4.3 스타일 속성
• 3.4.4 class와 for 속성
• 3.4.5 불 값을 속성 값으로 사용하는 경우
• 3.5 퀴즈
• 3.6 요약
• 3.7 퀴즈 정답
• 4장 React 컴포넌트의 상태 객체
• 4.1 React 컴포넌트의 상태란?
• 4.2 상태 객체 다루기
• 4.2.1 상태 객체에 접근하기
• 4.2.2 초기 상태 설정하기
• 4.2.3 상태 갱신하기
• 4.3 상태 객체와 속성
• 4.4 상태비저장 컴포넌트
• 4.5 상태비저장 컴포넌트와 상태저장 컴포넌트의 비교
• 4.6 퀴즈
• 4.7 요약
• 4.8 퀴즈 정답
• 5장 React 컴포넌트 라이프사이클 이벤트
• 5.1 React 컴포넌트 라이프사이클 이벤트 한눈에 살펴보기
• 5.2 이벤트 분류
• 5.3 이벤트 구현
• 5.4 모든 이벤트 실행하기
• 5.5 마운팅 이벤트
• 5.5.1 componentWillMount()
• 5.5.2 componentDidMount()
• 5.6 갱신 이벤트
• 5.6.1 componentWillReceiveProps(newProps)
• 5.6.2 shouldComponentUpdate()
• 5.6.3 componentWillUpdate()
• 5.6.4 componentDidUpdate()
• 5.7 언마운팅 이벤트
• 5.7.1 componentWillUnmount()
• 5.8 간단한 예제
• 5.9 퀴즈
• 5.10 요약
• 5.11 퀴즈 정답
• 6장 React에서 이벤트 다루기
• 6.1 React에서 DOM 이벤트 다루기
• 6.1.1 캡처 및 버블링 단계
• 6.1.2 React 이벤트 살펴보기
• 6.1.3 React 합성 이벤트 객체 다루기
• 6.1.4 이벤트와 상태 사용하기
• 6.1.5 이벤트 핸들러를 속성으로 전달하기
• 6.1.6 컴포넌트 간의 데이터 교환
• 6.2 React가 지원하지 않는 DOM 이벤트 처리하기
• 6.3 React를 다른 라이브러리와 통합하기: jQuery UI 이벤트
• 6.3.2 라벨 통합하기
• 6.4 퀴즈
• 6.5 요약
• 6.6 퀴즈 정답
• 7장 React에서 폼 다루기
• 7.1 React에서 폼을 다루기 위한 권장 방법
• 7.1.1 React에서 폼과 이벤트 정의하기
• 7.1.2 폼 요소 정의하기
• 7.1.3 변경 감지하기
• 7.1.4 대출 신청서의 계좌번호 영역 만들기
• 7.2 폼을 다루는 다른 방법
• 7.2.1 비제어 엘리먼트에서 변경 감지하기
• 7.2.2 비제어 엘리먼트에서 이벤트를 감지하지 않는 경우
• 7.2.3 값에 참조로 접근하기
• 7.2.4 기본값 설정하기
• 7.3 퀴즈
• 7.4 요약
• 7.5 퀴즈 정답
• 8장 확장성을 고려한 React 컴포넌트
• 8.1 컴포넌트의 기본 속성
• 8.2 React 속성 타입과 유효성 검사
• 8.3 자식 엘리먼트 렌더링
• 8.4 코드 재사용을 위한 React 고차 컴포넌트 생성하기
• 8.4.1 displayName을 이용한 자식 컴포넌트와 부모 컴포넌트의 구분
• 8.4.2 펼침 연산자를 사용해서 모든 속성 전달하기
• 8.4.3 고차 컴포넌트 사용하기
• 8.5 모범 사례: 프레젠테이션 컴포넌트와 컨테이너 컴포넌트
• 8.6 퀴즈
• 8.7 요약
• 8.8 퀴즈 정답
• 9장 프로젝트: Menu 컴포넌트
• 9.1 프로젝트 구조와 개발 환경 준비하기
• 9.2 JSX를 사용하지 않고 만드는 Menu 컴포넌트
• 9.2.1 Menu 컴포넌트
• 9.2.2 Link 컴포넌트
• 9.2.3 메뉴 작동시키기
• 9.3 JSX로 만드는 Menu 컴포넌트
• 9.3.1 Menu 컴포넌트 리팩토링
• 9.3.2 Link 컴포넌트 리팩토링
• 9.3.3 JSX 프로젝트 실행하기
• 9.4 과제
• 9.5 요약
• 10장 프로젝트: Tooltip 컴포넌트
• 10.1 프로젝트 구조와 개발 환경 준비하기
• 10.2 Tooltip 컴포넌트
• 10.2.1 toggle() 메서드
• 10.2.2 render() 메서드
• 10.3 실행하기
• 10.4 과제
• 10.5 요약
• 11장 프로젝트: Timer 컴포넌트
• 11.1 프로젝트 구조와 개발 환경 준비하기
• 11.2 앱 아키텍처
• 11.3 TimerWrapper 컴포넌트
• 11.4 Timer 컴포넌트
• 11.5 Button 컴포넌트
• 11.6 실행하기
• 11.7 과제
• 11.8 요약
• 제 2 부 React 아키텍처
• 12장 Webpack 빌드 도구
• 12.1 Webpack의 역할
• 12.2 프로젝트에 Webpack 적용하기
• 1 2.2.1 Webpack과 의존 모듈 설치
• 1 2.2.2 Webpack 설정
• 12.3 코드 모듈화
• 12.4 Webpack의 실행과 빌드 테스트
• 12.5 핫 모듈 대체
• 1 2.5.1 HMR 설정 방법
• 1 2.5.2 HMR 실행
• 12.6 퀴즈
• 12.7 요약
• 12.8 퀴즈 정답
• 13장 React 라우팅
• 13.1 라우터를 처음부터 구현하기
• 1 3.1.1 프로젝트 설정
• 1 3.1.2 app.jsx에서 경로 맵핑 생성하기
• 1 3.1.3 router.jsx 파일에 Router 컴포넌트 생성하기
• 13.2 React Router
• 1 3.2.1 JSX로 React Router 사용하기
• 1 3.2.2 해시 히스토리
• 1 3.2.3 브라우저 히스토리
• 1 3.2.4 React Router를 사용하기 위한 Webpack 설정
• 1 3.2.5 레이아웃 컴포넌트 생성하기
• 13.3 React Router의 기능과 패턴
• 1 3.3.1 withRouter 고차 컴포넌트를 이용해서 라우터에 접근하기
• 1 3.3.2 프로그래밍적으로 페이지 이동하기
• 1 3.3.3 URL 매개변수와 데이터 전달
• 1 3.3.4 React Router에서 속성 전달하기
• 13.4 Backbone을 이용한 라우팅
• 13.5 퀴즈
• 13.6 요약
• 13.7 퀴즈 정답
• 14장 Redux를 이용한 데이터 다루기
• 14.1 React의 단방향 데이터 흐름 지원
• 14.2 Flux 데이터 아키텍처의 이해
• 14.3 Redux 데이터 라이브러리 사용하기
• 1 4.3.1 Redux를 이용한 넷플릭스 따라잡기
• 1 4.3.2 의존 모듈과 빌드 설정
• 1 4.3.3 Redux 사용하기
• 1 4.3.4 라우팅
• 1 4.3.5 리듀서 결합하기
• 1 4.3.6 영화 목록 리듀서
• 1 4.3.7 액션
• 1 4.3.8 액션 생성자
• 1 4.3.9 컴포넌트를 스토어에 연결하기
• 1 4.3.10 스토어에 액션 전달하기
• 1 4.3.11 컴포넌트 속성으로 액션 생성자 전달하기
• 1 4.3.12 넷플릭스 앱 실행하기
• 1 4.3.13 Redux 요약 정리
• 14.4 퀴즈
• 14.5 요약
• 14.6 퀴즈 정답
• 15장 GraphQL을 이용한 데이터 다루기
• 15.1 GraphQL
• 15.2 넷플릭스 앱에 백엔드 추가하기
• 1 5.2.1 서버에 GraphQL 설치하기
• 1 5.2.2 데이터 구조
• 1 5.2.3 GraphQL 스키마
• 1 5.2.4 API를 호출하여 응답을 스토어에 저장하기
• 1 5.2.5 영화 목록 보여주기
• 1 5.2.6 GraphQL 요약 정리
• 15.3 퀴즈
• 15.4 요약
• 15.5 퀴즈 정답
• 16장 Jest를 이용한 React 단위 테스트
• 16.1 테스트의 종류
• 16.2 Jest와 다른 테스트 프레임워크의 비교
• 16.3 Jest를 이용한 단위 테스트
• 1 6.3.1 Jest 단위 테스트 작성
• 1 6.3.2 Jest 어써션
• 16.4 Jest와 TestUtils를 이용한 UI 테스트
• 1 6.4.1 TestUtils를 이용한 엘리먼트 탐색
• 1 6.4.2 패스워드 위젯을 위한 UI 테스트
• 1 6.4.3 얕은 렌더링
• 16.5 TestUtils 요약 정리
• 16.6 퀴즈
• 16.7 요약
• 16.8 퀴즈 정답
• 17장 React와 Node.js를 이용한 유니버셜 자바스크립트
• 17.1 React를 서버에서 사용하는 이유와 유니버셜 자바스크립트의 이해
• 1 7.1.1 적절한 페이지 색인
• 1 7.1.2 더 나은 성능과 빠른 속도
• 1 7.1.3 더 나은 코드 유지보수
• 1 7.1.4 React와 Node.js를 이용한 유니버셜 자바스크립트
• 17.2 Node.js와 React
• 17.3 React와 Express: 컴포넌트를 이용한 서버 측 렌더링
• 1 7.3.1 서버에서 간단한 텍스트 렌더링하기
• 1 7.3.2 HTML 페이지 렌더링
• 17.4 Express와 React를 이용한 유니버셜 자바스크립트
• 1 7.4.3 Handlebars를 이용한 서버 측 레이아웃 템플릿
• 1 7.4.2 서버 설정
• 1 7.4.4 서버에서 React 컴포넌트 구성하기
• 1 7.4.5 클라이언트 측의 React 코드
• 1 7.4.6 Webpack 설정
• 1 7.4.7 앱 실행하기
• 1 7.4.1 프로젝트 구조와 설정
• 17.5 퀴즈
• 17.6 요약
• 17.7 퀴즈 정답
• 18장 프로젝트: React Router를 이용한 서점 만들기
• 18.1 프로젝트 구조와 Webpack 설정
• 18.2 주 HTML 파일
• 18.3 컴포넌트 생성하기
• 1 8.3.1 메인 파일: app.jsx
• 1 8.3.2 Cart 컴포넌트
• 1 8.3.3 Checkout 컴포넌트
• 1 8.3.4 Modal 컴포넌트
• 1 8.3.5 Product 컴포넌트
• 18.4 프로젝트 실행하기
• 18.5 과제
• 18.6 요약
• 19장 프로젝트: Jest를 이용한 비밀번호 검사
• 19.1 프로젝트 구조와 Webpack 설정
• 19.2 주 HTML 파일
• 19.3 비밀번호 모듈 구현하기
• 1 9.3.1 테스트 작성
• 1 9.3.2 코드 구현
• 19.4 Password 컴포넌트 구현하기
• 1 9.4.1 테스트 작성
• 1 9.4.2 코드 구현
• 19.5 실행하기
• 19.6 과제
• 19.7 요약
• 20장 프로젝트: Jest, Express, MongoDB를 이용한 자동완성 컴포넌트 구현
• 20.1 프로젝트 구조와 Webpack 설정
• 20.2 웹 서버 구현하기
• 2 0.2.1 RESTful API 정의하기
• 2 0.2.2 서버에서 React 렌더링하기
• 20.3 브라우저 스크립트 추가하기
• 20.4 서버 템플릿 생성하기
• 20.5 Autocomplete 컴포넌트 구현하기
• 2 0.5.1 Autocomplete 컴포넌트를 위한 테스트
• 2 0.5.2 Autocomplete 컴포넌트 코드
• 20.6 실행하기
• 20.7 과제
• 20.8 요약