리액트 교과서

Source code for React Quickly: Painless Web Apps with React, JSX, Redux, and GraphQL 📕 [Manning, 2017]. More information at the website or Manning Publications.

Available NOW in major book stores and at Manning.

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 상태비저장 컴포넌트와 상태저장 컴포넌트의 비교 1

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.1 버튼 통합하기

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 적용하기

12.2.1 Webpack과 의존 모듈 설치

12.2.2 Webpack 설정

12.3 코드 모듈화

12.4 Webpack의 실행과 빌드 테스트

12.5 핫 모듈 대체

12.5.1 HMR 설정 방법

12.5.2 HMR 실행

12.6 퀴즈

12.7 요약

12.8 퀴즈 정답

13장 React 라우팅

13.1 라우터를 처음부터 구현하기

13.1.1 프로젝트 설정

13.1.2 app.jsx에서 경로 맵핑 생성하기

13.1.3 router.jsx 파일에 Router 컴포넌트 생성하기

13.2 React Router

13.2.1 JSX로 React Router 사용하기

13.2.2 해시 히스토리

13.2.3 브라우저 히스토리

13.2.4 React Router를 사용하기 위한 Webpack 설정

13.2.5 레이아웃 컴포넌트 생성하기

13.3 React Router의 기능과 패턴

13.3.1 withRouter 고차 컴포넌트를 이용해서 라우터에 접근하기

13.3.2 프로그래밍적으로 페이지 이동하기

13.3.3 URL 매개변수와 데이터 전달

13.3.4 React Router에서 속성 전달하기

13.4 Backbone을 이용한 라우팅

13.5 퀴즈

13.6 요약

13.7 퀴즈 정답

14장 Redux를 이용한 데이터 다루기

14.1 React의 단방향 데이터 흐름 지원

14.2 Flux 데이터 아키텍처의 이해

14.3 Redux 데이터 라이브러리 사용하기

14.3.1 Redux를 이용한 넷플릭스 따라잡기

14.3.2 의존 모듈과 빌드 설정

14.3.3 Redux 사용하기

14.3.4 라우팅

14.3.5 리듀서 결합하기

14.3.6 영화 목록 리듀서

14.3.7 액션

14.3.8 액션 생성자

14.3.9 컴포넌트를 스토어에 연결하기

14.3.10 스토어에 액션 전달하기

14.3.11 컴포넌트 속성으로 액션 생성자 전달하기

14.3.12 넷플릭스 앱 실행하기

14.3.13 Redux 요약 정리

14.4 퀴즈

14.5 요약

14.6 퀴즈 정답

15장 GraphQL을 이용한 데이터 다루기

15.1 GraphQL

15.2 넷플릭스 앱에 백엔드 추가하기

15.2.1 서버에 GraphQL 설치하기

15.2.2 데이터 구조

15.2.3 GraphQL 스키마

15.2.4 API를 호출하여 응답을 스토어에 저장하기

15.2.5 영화 목록 보여주기

15.2.6 GraphQL 요약 정리

15.3 퀴즈

15.4 요약

15.5 퀴즈 정답

16장 Jest를 이용한 React 단위 테스트

16.1 테스트의 종류

16.2 Jest와 다른 테스트 프레임워크의 비교

16.3 Jest를 이용한 단위 테스트

16.3.1 Jest 단위 테스트 작성

16.3.2 Jest 어써션

16.4 Jest와 TestUtils를 이용한 UI 테스트

16.4.1 TestUtils를 이용한 엘리먼트 탐색

16.4.2 패스워드 위젯을 위한 UI 테스트

16.4.3 얕은 렌더링

16.5 TestUtils 요약 정리

16.6 퀴즈

16.7 요약

16.8 퀴즈 정답

17장 React와 Node.js를 이용한 유니버셜 자바스크립트

17.1 React를 서버에서 사용하는 이유와 유니버셜 자바스크립트의 이해

17.1.1 적절한 페이지 색인

17.1.2 더 나은 성능과 빠른 속도

17.1.3 더 나은 코드 유지보수

17.1.4 React와 Node.js를 이용한 유니버셜 자바스크립트

17.2 Node.js와 React

17.3 React와 Express: 컴포넌트를 이용한 서버 측 렌더링

17.3.1 서버에서 간단한 텍스트 렌더링하기

17.3.2 HTML 페이지 렌더링

17.4 Express와 React를 이용한 유니버셜 자바스크립트

17.4.1 프로젝트 구조와 설정

17.4.2 서버 설정

17.4.3 Handlebars를 이용한 서버 측 레이아웃 템플릿

17.4.4 서버에서 React 컴포넌트 구성하기

17.4.5 클라이언트 측의 React 코드

17.4.6 Webpack 설정

17.4.7 앱 실행하기

17.5 퀴즈

17.6 요약

17.7 퀴즈 정답

18장 프로젝트: React Router를 이용한 서점 만들기

18.1 프로젝트 구조와 Webpack 설정

18.2 주 HTML 파일

18.3 컴포넌트 생성하기

18.3.1 메인 파일: app.jsx

18.3.2 Cart 컴포넌트

18.3.3 Checkout 컴포넌트

18.3.4 Modal 컴포넌트

18.3.5 Product 컴포넌트

18.4 프로젝트 실행하기

18.5 과제

18.6 요약

19장 프로젝트: Jest를 이용한 비밀번호 검사

19.1 프로젝트 구조와 Webpack 설정

19.2 주 HTML 파일

19.3 비밀번호 모듈 구현하기

19.3.1 테스트 작성

19.3.2 코드 구현

19.4 Password 컴포넌트 구현하기

19.4.1 테스트 작성

19.4.2 코드 구현

19.5 실행하기

19.6 과제

19.7 요약

20장 프로젝트: Jest, Express, MongoDB를 이용한 자동완성 컴포넌트 구현

20.1 프로젝트 구조와 Webpack 설정

20.2 웹 서버 구현하기

20.2.1 RESTful API 정의하기

20.2.2 서버에서 React 렌더링하기

20.3 브라우저 스크립트 추가하기

20.4 서버 템플릿 생성하기

20.5 Autocomplete 컴포넌트 구현하기

20.5.1 Autocomplete 컴포넌트를 위한 테스트

20.5.2 Autocomplete 컴포넌트 코드

20.6 실행하기

20.7 과제

20.8 요약

부록 A | 이 책에서 사용한 애플리케이션 설치하기

부록 B | React 치트시트

부록 C | Express.js 치트시트

부록 D | MongoDB와 Mongoose 치트시트

부록 E | 성공을 위한 ES6

부록 F | 서점 예제로 살펴보는 React Router v4

부록 G | React 버전 16.3의 변경 사항