프로 리액트

▣ 1장: 시작하기
시작하기 전에
- Node.js와 npm
- 자바스크립트 ES6
리액트의 정의
리액트의 장점
- 편리한 반응형 렌더링
- 순수 자바스크립트를 이용한 컴포넌트 기반 개발
- 문서 모델의 유연한 추상화
첫 번째 리액트 앱 작성
- 리액트 개발 워크플로
- 첫 번째 컴포넌트 만들기
- 타이핑 수고를 약간 줄이는 방법
- 동적 값
컴포넌트 조합하기
- 속성
- 칸반 보드 앱 소개
- 컴포넌트 계층 정의
- 속성의 중요성
- 컴포넌트 만들기
- 앱 모듈(App.js)
상태 소개
- 칸반 앱: 토글되는 카드
정리

▣ 02장: DOM 추상화의 내부
리액트의 이벤트
- DOM 이벤트 리스너
- 칸반 앱: DOM 이벤트 관리
JSX 자세히 살펴보기
- JSX와 HTML 비교
- JSX와 HTML의 차이
- JSX의 특이점
칸반 앱: 카드가 열려있는지 여부 확인
- 공백
- JSX의 주석
- 동적 HTML 렌더링
- 칸반 앱: 마크다운 렌더링
JSX를 배제하고 리액트 이용
- 일반 자바스크립트로 리액트 요소 만들기
- 요소 팩토리
- 커스텀 팩토리
인라인 스타일링
- 인라인 스타일 정의
- 칸반 앱: 인라인 스타일링을 이용한 카드 색상 지정
폼 처리
- 제어 컴포넌트
- 특수 사례
- 비제어 컴포넌트
- 칸반 앱: 태스크 폼 만들기
가상 DOM의 작동 방식
- 키
- 칸반 앱: 키
- ref
정리

▣ 03장: 컴포넌트를 이용한 애플리케이션 구축
속성 유효성 검사
- 속성 기본값
- 기본 제공되는 propTypes 유효성 검사기
- 칸반 앱: 속성 형식 정의
- 커스텀 propTypes 유효성 검사기
컴포넌트 조합 전략과 모범 사례
- 상태 저장 컴포넌트와 순수 컴포넌트
- 어떤 컴포넌트가 상태 저장이어야 할까?
- 데이터 흐름과 컴포넌트 통신
컴포넌트 수명주기
- 수명주기 단계와 메서드
- 수명주기 함수의 실제 활용: 데이터 가져오기
불변성에 대한 개요
- 일반 자바스크립트에서의 불변성
- 중첩된 객체
- 리액트 불변성 도우미
칸반 앱: 약간의 복잡성 추가
정리

▣ 04장: 정교한 상호작용
리액트의 애니메이션
- CSS 트랜지션과 애니메이션의 기초
- ReactCSSTransitionGroup
드래그 앤드 드롭
- 리액트 DnD 구현 개요
- 리액트 DnD 예제 구현
칸반 앱: 애니메이션과 드래그 앤드 드롭 지원
- 카드 토글 애니메이션
- 카드 드래그
정리

▣ 05장: 라우팅
라우팅을 구현하는 단순한 방식
리액트 라우터
- 인덱스 라우트
- 매개변수를 이용하는 라우트
- 활성 링크 설정
- 속성 전달하기
- UI와 URL의 연결 분리
- 프로그래밍 방식으로 라우트 변경
- 히스토리
- 칸반 앱: 라우팅
정리

▣ 06장: 플럭스를 이용한 리액트 애플리케이션 설계
플럭스란?
- 스토어
- 액션
- 디스패처
실용성이 없는 최소 플럭스 앱
- 은행계좌 애플리케이션
플럭스 유틸
- 플럭스 유틸 스토어
- 컨테이너 컴포넌트 고차 함수
비동기 플럭스
- waitFor: 스토어 업데이트 순서
- 비동기 데이터 가져오기
에어치프 애플리케이션
- 설정: 프로젝트 구성과 기본 파일
- 공항을 가져오는 액션 생성자와 API 도우미 작성
- AirportStore
- App 컴포넌트
- 에어치프 애플리케이션 완성: 항공권 로딩
- API 도우미
비동기 데이터 가져오기 구현 발전시키기
- AppDispatcher의 dispatchAsync 메서드
칸반 앱: 플럭스 아키텍처로 전환
- 리팩터: 플럭스 기본 구조 제작 및 파일 이동
- 플럭스 아키텍처로 데이터 가져오기 전환
- FetchCards 액션, API 메서드 호출, 스토어 콜백 구현
- 모든 카드와 태스크 조작을 플럭스 아키텍처로 이식하기
- 기능 이식을 위한 준비
- 컴포넌트
- 모든 컴포넌트 상태 제거
정리

▣ 07장: 성능 튜닝
조정 프로세스 작동 방식
- 일괄 처리
- 하위 트리 렌더링
리액트 퍼프
- 성능 테스트 애플리케이션
- 리액트 퍼프 설치와 이용
shouldComponentUpdate
- shallowCompare 애드온
정리

▣ 08장: 동형 리액트 애플리케이션
Node.js와 익스프레스
- Node.js와 익스프레스를 이용한 “Hello World” 애플리케이션 제작
동형 리액트의 기본
- 프로젝트 구조 만들기
- 서버상의 리액트 컴포넌트 렌더링
- 클라이언트에 리액트 마운팅
라우팅
- 내부 라우트 설정
- 동적 데이터 가져오기
- 라우트 렌더링
정리

▣ 09장: 리액트 컴포넌트의 테스트
제스트
리액트 테스트 유틸리티
- 테스트용 컴포넌트 렌더링
- 자식 순회 및 찾기
- 이벤트 시뮬레이션
- 얕은 렌더링
정리

▣ 부록A: 웹팩
웹팩이란?
그런트나 걸프와 같은 빌드 도구와의 차이점
시작하기
- 예제 프로젝트
- 첫 번째 빌드 실행
구성 파일 정의
- 태스크 바로가기 추가
- 소스맵 생성
웹팩 개발 서버
로더
바벨
- 설치와 구성
- 바벨 구성 파일
자바스크립트 외의 애셋
- 스타일시트
- CSS 모듈
- CSS 프로세서
플러그인
- 플러그인 이용하기
- html-webpack-plugin
HMR
실무용 빌드
최적화 플러그인
캐싱
정리

▣ 부록B: 자바스크립트 2015
클래스
모듈
let과 const
프로미스
화살표 함수
템플릿 문자열
구조분해 할당