★ 이 책에서 다루는 내용 ★ ■ 리액트 아키텍처의 확실한 이해 ■ 리액트를 사용한 풍부하고 동적인 웹앱 클라이언트 제작 ■ 리덕스를 사용한 데이터 스토어 제작 ■ REST와 그래프QL로 데이터 사용 ■ 리액트 프로젝트 테스트 ★ 이 책의 대상 독자 ★ 리액트를 사용해 동적인 클라이언트 측 애플리케이션을 제작하고자 하는 자바스크립트 개발자를 위한 책이다. ★ 이 책의 구성 ★ 1부, 리액트 시작하기 1부는 리액트 개발을 시작하는 데 필요한 정보를 제공한다. 1장에서 간단한 리액트 애플리케이션의 제작 방법을 익히고 3장과 4장에서 HTML, CSS, 자바스크립트와 같은 리액트 개발의 핵심 기술에 관한 기초 지식을 복습한다. 5장부터 8장까지는 SportsStore라고 하는 좀 더 현실적인 애플리케이션 제작 과정을 거친다. 2부, 리액트 주무르기 2부에서는 대부분의 프로젝트에 필요한 리액트의 핵심 기능을 다룬다. 리액트에는 많은 기능이 내장돼 있다. 예제 애플리케이션을 위해 커스텀 코드와 콘텐츠를 추가하는 방식으로 기능을 깊이 있게 설명할 것이다. 3부, 리액트 애플리케이션 완성하기 리액트는 복잡한 애플리케이션에 필요한 고급 기능을 별도의 패키지를 통해 제공한다. 3부에서는 중요한 패키지들을 소개하고, 작동 원리를 설명하며, 어떻게 리액트의 핵심 기능에 적용할 수 있는지 알아본다 ★ 옮긴이의 말 ★ 스택 오버플로(Stack Overflow)의 2019년 조사에 의하면 가장 많이 사용되는 웹 프레임워크는 제이쿼리(jQuery), 리액트(React), 앵귤러(Angular) 순이었습니다. 범용 자바스크립트 라이브러리인 제이쿼리를 제외한다면, 자바스크립트 UI 프레임워크로는 여전히 리액트가 선두에 있습니다. 또한 가장 사랑하는, 가장 배우고 싶은 웹 프레임워크 부문에서도 리액트가 1위였습니다. 그런 인기만큼이나 리액트 관련 서적도 많습니다만, 그중에서도 이 책은 리덕스(Redux), URL 라우팅, 그래프QL(GraphQL) 리액트로 웹앱을 개발할 때 필요한 거의 모든 사항을 다루고 있습니다. 이 책의 또 하나의 장점은 모든 버전을 고정해 예제를 제시하고 있다는 점입니다. 많은 경우에 각 패키지들의 버전이 집필 시점과 달라짐에 따라 독자가 실습을 할 때 오류가 발생하거나 책의 설명이 맞지 않기도 합니다. 이 책은 그런 문제를 방지하고자 모든 패키지의 버전을 명시해 실습하게 했습니다. 예컨대 리액트의 경우 이 책에서는 16.7을 사용하며, 이 책을 보는 시점의 최신 버전은 16.13이나 16.14 정도로 예상됩니다. 그러나 이 정도의 마이너 버전 차이는 리액트를 공부하는 데 거의 지장을 주지 않습니다. 오히려 리액트와 그에 맞는 각 패키지들의 버전을 고정함으로써 완벽한 실습이 가능해집니다. 이 책은 리액트를 처음 접하는 독자, 이미 리액트를 기초 수준에서 알고 있는 독자 모두에게 적합합니다. 이 책으로 리액트를 마스터하고 실제 프로젝트에서도 충분히 활용할 수 있다고 감히 말씀드립니다. 신종 바이러스 사태 등 여러 가지 힘든 상황에서도 고군분투하는 모든 웹 개발자 분들의 건승과 성공을 빕니다.

1부. 리액트 시작하기 1장. 첫 리액트 애플리케이션 __개발 환경 준비 ____Node.js 설치 ____Create React App 설치 ____깃 설치 ____에디터 설치 ____브라우저 설치 __프로젝트 생성 ____프로젝트 구조 ____부트스트랩 CSS 프레임워크 ____개발 도구 __임시 콘텐츠 대체 __동적 콘텐츠 ____상태 데이터의 변경 __할 일 목록 애플리케이션에 기능 추가 ____할 일 목록 보여주기 __컴포넌트 추가 ____자식 컴포넌트 사용 __마무리 작업 ____완료된 할 일의 시각적 처리 ____데이터의 지속 저장 __정리 2장. 리액트의 이해 __리액트는 필수인가? ____라운드 트립 애플리케이션 ____싱글 페이지 애플리케이션 ____애플리케이션 복잡성 __필요한 사전 지식 __필요한 개발 환경 ____이 책의 구성 ____1부: 리액트 시작하기 ____2부: 리액트 주무르기 ____3부: 리액트 애플리케이션 완성하기 __예제의 양 __이 책의 예제 코드 __이 책의 정오표 __연락 방법 __정리 3장. HTML, JSX, CSS 핵심 정리 __준비 작업 ____HTML 파일과 컴포넌트 준비 ____예제 실행 __HTML과 DOM 엘리먼트의 이해 ____엘리먼트 콘텐츠의 이해 ____속성의 이해 ____HTML 엘리먼트의 동적 생성 ____리액트 컴포넌트를 사용한 엘리먼트의 동적 생성 __리액트 엘리먼트에서의 표현식 ____표현식과 정적 콘텐츠의 결합 ____표현식 안에서의 계산 ____컴포넌트 프로퍼티와 메소드 접근 ____표현식으로 프로퍼티 값 설정 ____표현식으로 이벤트 처리 __부트스트랩 소개 ____기본 부트스트랩 클래스 적용 ____부트스트랩으로 그리드 생성 ____부트스트랩으로 테이블 스타일 적용 ____부트스트랩으로 폼 스타일 적용 __정리 4장. 자바스크립트 핵심 정리 __준비 작업 __자바스크립트 구문 __자바스크립트 함수 ____파라미터가 있는 함수 ____결과를 리턴하는 함수 ____다른 함수의 인자로 함수 사용 __변수와 타입 ____기본 데이터 타입 __자바스크립트 연산자 ____조건문 ____등치 연산자와 일치 연산자 ____명시적 타입 변환 __배열 ____배열 리터럴 ____배열 콘텐츠의 읽기와 변경 ____배열 콘텐츠 열거 ____스프레드 연산자 ____배열의 내장 메소드 __객체 ____객체 리터럴 ____메소드로서의 함수 ____클래스 ____다른 객체로 프로퍼티 복사 ____명명된 파라미터로 프로퍼티 읽기 __자바스크립트 모듈 ____자바스크립트 모듈의 생성과 사용 ____명명된 기능 내보내기 ____여러 개의 명명된 기능 정의하기 __자바스크립트 프로미스 ____비동기 작업의 문제점 ____프로미스 사용하기 ____비동기 작업을 다루는 쉬운 방법 __정리 5장. SportsStore: 현실적인 애플리케이션 __프로젝트 준비 ____추가 패키지 설치 ____CSS 스타일시트 추가 ____웹 서비스 준비 ____예제 애플리케이션 실행 __데이터 스토어 ____데이터 스토어 액션과 액션 생성자 __쇼핑 기능 만들기 ____상품과 카테고리 컴포넌트 제작 ____데이터 스토어 및 URL 라우터 연결 ____애플리케이션에 Shop 추가 ____카테고리 버튼 개선 __쇼핑 카트 추가 ____데이터 스토어 확장 ____CartSummary 컴포넌트 추가 ____CartDetails 컴포넌트 추가 ____라우팅 설정에 카트 URL 추가 __정리 6장. SportsStore: REST와 결제 시스템 __준비 작업 __RESTful 웹 서비스 ____설정 파일 만들기 ____데이터 소스 생성 ____데이터 스토어 확장 ____액션 생성자 수정 __페이지네이션 ____웹 서비스 페이지네이션 ____HTTP 요청과 액션 변경 ____데이터 로딩 컴포넌트 제작 ____ShopConnector 컴포넌트 수정 ____카테고리 버튼 수정 ____페이지네이션 제어 __결제 처리 시스템 ____REST 데이터 소스와 데이터 스토어 확장 ____결제 폼 제작 __ShopConnector 컴포넌트 다듬기 __정리 7장. SportsStore: 관리자 기능 __준비 작업 ____예제 애플리케이션 실행 __그래프QL 서비스 제작 ____그래프QL 스키마 정의 ____그래프QL 리졸버 정의 ____서버 갱신 __주문 관리 기능 ____주문 테이블 컴포넌트 정의 ____커넥터 컴포넌트 정의 ____그래프QL 클라이언트 구성 ____뮤테이션 설정 __상품 관리 기능 ____상품 테이블 컴포넌트 연결 ____상품 편집 컴포넌트 제작 ____라우팅 설정 추가 __정리 8장. SportsStore: 인증과 배포 __준비 작업 __그래프QL 요청에 대한 인증 ____인증 시스템의 이해 ____인증 컨텍스트 생성 ____인증 폼 만들기 ____관리자 기능의 보호 ____관리자 기능으로의 내비게이션 링크 추가하기 __애플리케이션 배포 준비 ____관리자 기능에 지연 로딩 적용 ____데이터 파일 만들기 ____요청 URL 변경 ____애플리케이션 빌드 ____애플리케이션 서버 제작 ____배포 버전과 서버 테스트 __SportsStore 애플리케이션의 컨테이너화 ____도커 설치 ____애플리케이션 준비 ____도커 컨테이너 생성 ____애플리케이션 실행 __정리 2부. 리액트 주무르기 9장. 리액트 프로젝트의 이해 __준비 작업 __리액트 프로젝트의 구조 ____소스 코드 폴더 ____패키지 폴더 __리액트 개발 도구 ____컴파일과 변환 과정의 이해 ____개발 HTTP 서버 ____정적 콘텐츠 ____에러 디스플레이 ____린터의 이해 ____개발 도구 설정 __디버깅 ____애플리케이션의 상태 조사 ____브라우저 디버거 사용하기 __정리 10장. 컴포넌트와 props __준비 작업 __컴포넌트의 이해 ____HTML 콘텐츠 렌더링 ____다른 컴포넌트의 렌더링 __props의 이해 ____부모 컴포넌트에서 props 정의 ____자식 컴포넌트에서 props 받기 __자바스크립트와 props의 조합 ____콘텐츠의 조건부 렌더링 ____배열 렌더링 ____복수의 엘리먼트 렌더링 ____렌더링하지 않기 ____props 변경 시도 __함수 props ____함수 prop에 인자 사용 __자식 컴포넌트에 props 전달 ____props 일괄 전달 __기본 prop 값 제공 __prop 값의 타입 검사 __정리 11장. 상태 유지 컴포넌트 __준비 작업 __컴포넌트 유형의 이해 ____무상태 컴포넌트의 이해 ____상태 유지 컴포넌트의 이해 __상태 유지 컴포넌트 제작 ____컴포넌트 클래스의 이해 ____import 구문의 이해 ____render 메소드의 이해 ____상태 유지 컴포넌트 props의 이해 __상태 데이터 추가 ____상태 데이터 읽기 __상태 데이터 변경 ____상태 데이터 변경의 함정 __훅을 사용한 상태 유지 컴포넌트 __상태 데이터 끌어올리기 ____상태 데이터 더 끌어올리기 __prop 타입과 기본값 정의 __정리 12장. 이벤트 __준비 작업 __이벤트의 이해 ____이벤트 처리 메소드 사용 ____이벤트 객체의 이해 ____이벤트 핸들러 호출에 커스텀 인자 사용 ____기본 동작 취소 __이벤트 전파 ____타깃 단계와 버블 단계 ____캡처 단계 ____이벤트 단계 판별 ____이벤트 전파 중단 __정리 13장. 재조정과 생명주기 __준비 작업 ____예제 컴포넌트 작성 __콘텐츠 렌더링에 대한 이해 ____갱신 과정의 이해 ____재조정 과정의 이해 ____목록 재조정의 이해 __명시적 재조정 __컴포넌트 생명주기 ____마운트 단계 ____업데이트 단계 ____언마운트 단계 __이펙트 훅 __고급 생명주기 메소드 ____불필요한 컴포넌트 업데이트의 방지 ____props 값으로부터 상태 데이터 갱신 __정리 14장. 애플리케이션 컴포지션 __준비 작업 ____예제 컴포넌트 작성 __기본 컴포넌트 관계 __children prop 사용하기 ____children prop 다루기 __특성화 컴포넌트 __고차 컴포넌트 ____상태 유지 HOC ____HOC의 조합 __렌더링 prop ____인자가 있는 렌더링 prop __전역 데이터를 위한 컨텍스트 ____컨텍스트 정의 ____컨텍스트 소비자 ____컨텍스트 제공자 ____컨텍스트 데이터 변경 ____컨텍스트 API 사용 __에러 경계 ____에러 경계 컴포넌트 __정리 15장. 폼과 데이터 검증 __준비 작업 ____예제 컴포넌트 작성 ____개발 도구 실행 __폼 엘리먼트 사용 ____select 엘리먼트 ____라디오 버튼 ____체크박스 ____체크박스를 사용한 배열 채우기 ____텍스트 영역 __폼 데이터 검증 ____검증 규칙 정의 ____컨테이너 컴포넌트 제작 ____검증 메시지 표시 ____폼 검증 적용 ____그 밖의 엘리먼트와 데이터 타입의 검증 ____폼에 특정적인 검증 __정리 16장. ref와 포털 __준비 작업 __ref 생성 __비제어 폼 컴포넌트 ____콜백 함수를 사용한 ref 생성 ____비제어 폼 컴포넌트의 검증 __ref와 생명주기 __다른 라이브러리나 프레임워크를 위한 ref __자식 컴포넌트의 콘텐츠에 접근 ____ref 포워딩 __포털 __정리 17장. 유닛 테스트 __준비 작업 ____컴포넌트 작성 ____예제 애플리케이션 실행 __간단한 유닛 테스트 __얕은 렌더링을 사용한 컴포넌트 테스트 __전체 렌더링을 사용한 컴포넌트 테스트 __props, 상태, 메소드, 이벤트를 사용한 테스트 ____메소드 테스트 ____이벤트 테스트 ____컴포넌트 상호작용 테스트 __정리 3부. 리액트 애플리케이션 완성하기 18장. 온전한 애플리케이션 제작 __프로젝트 생성 ____개발 도구 실행 __예제 애플리케이션 작성 ____상품 관련 개발 ____공급업체 관련 개발 ____애플리케이션 완성하기 __예제 애플리케이션의 한계 __정리 19장. 리덕스 데이터 스토어 __준비 작업 __데이터 스토어 생성 ____데이터 타입 정의 ____초기 데이터 정의 ____액션 타입 정의 ____액션 생성자 정의 ____리듀서 정의 ____데이터 스토어 생성 __데이터 스토어 사용 ____최상위 컴포넌트에 데이터 스토어 적용 ____상품 데이터 연결 ____공급업체 데이터 연결 __데이터 스토어 확장 ____스토어에 상태 데이터 추가 ____액션 타입과 액션 생성자 정의 ____리듀서 정의 ____스토어에 상태 데이터 기능 통합 ____컴포넌트와 상태 데이터 연결 __복수의 액션 디스패치 __참조의 필요성 __정리 20장. 데이터 스토어 API __준비 작업 __리덕스 데이터 스토어 API ____데이터 스토어 상태 취득 ____데이터 스토어의 변경 감시 ____액션 디스패치 ____커넥터 컴포넌트 제작 __리듀서 개선 __데이터 스토어 미들웨어 __데이터 스토어 개선 ____개선자 적용 __리액트 리덕스 API ____고급 연결 기능 __정리 21장. URL 라우팅 __준비 작업 __URL 라우팅 시작하기 ____Link 컴포넌트 ____Route 컴포넌트 __내비게이션에 대한 응답 ____컴포넌트와 콘텐츠 선택 ____URL 매칭 ____단일 Route 매칭 ____리다이렉션 사용 __내비게이션 링크 렌더링 ____활성화된 링크 표시 __라우터 선택 ____HashRouter 컴포넌트 __정리 22장. 고급 URL 라우팅 __준비 작업 __라우팅 인식 컴포넌트 ____match prop ____location prop ____URL 파라미터 사용 __다른 컴포넌트에서 라우팅 데이터 접근 ____라우팅 데이터의 직접 접근 ____HOC를 사용한 라우팅 데이터 접근 __프로그래밍 방식의 내비게이션 ____컴포넌트를 사용한 프로그래밍 방식의 내비게이션 ____내비게이션의 사용자 확정 __프로그래밍 방식의 라우트 생성 __데이터 스토어 컴포넌트와 함께 라우팅 사용 ____디스플레이 컴포넌트 교체 ____편집기 컴포넌트 수정 ____테이블 컴포넌트 수정 ____라우팅 설정의 마무리 __정리 23장. RESTful 웹 서비스 __준비 작업 ____프로젝트에 패키지 추가 ____웹 서비스 준비 ____컴포넌트와 라우트 추가 ____웹 서비스와 예제 애플리케이션 실행 __RESTful 웹 서비스의 이해 __웹 서비스 소비하기 ____데이터 소스 컴포넌트 제작 ____컴포넌트에서 데이터 가져오기 ____데이터의 저장, 갱신, 삭제 ____에러 처리 __데이터 스토어와 함께 웹 서비스 소비하기 ____신규 미들웨어 제작 ____데이터 스토어에 미들웨어 추가 ____애플리케이션 완성 __정리 24장. 그래프QL의 이해 __준비 작업 __그래프QL의 이해 __그래프QL 서버 제작 ____스키마 작성 ____리졸버 제작 ____서버 제작 __그래프QL 쿼리 작성 ____연관 데이터 질의 ____인자를 사용한 쿼리 __그래프QL 뮤테이션 __그 밖의 그래프QL 기능 ____요청 변수 ____다중 요청 ____쿼리 프래그먼트 __정리 25장. 그래프QL 소비하기 __준비 작업 ____패키지 추가 ____그래프QL 서버를 위한 데이터 변경 ____스키마와 리졸버 갱신 ____그래프QL 서버에 개발 도구 통합 __그래프QL 서비스 소비하기 ____쿼리와 뮤테이션 정의 ____데이터 소스 정의 ____격리된 컴포넌트 설정 __데이터 스토어와 함께 그래프QL 사용 ____그래프QL 데이터 형식 조정 __그래프QL 클라이언트 프레임워크 ____클라이언트 설정 ____그래프QL 컴포넌트 제작 ____뮤테이션 사용 ____공급업체 데이터와 편집 기능 추가 __정리