1장. 왜 리액트인가?
리액트란?
리액트는 단지 뷰다
단순성이 좋다
선언적 UI 구조
시간과 데이터
성능 문제
올바른 추상화 수준
리액트 16의 변경 사항
핵심 아키텍처 개선
생명주기 메서드
컨텍스트 API
프래그먼트 렌더링
목록과 문자열을 렌더링
요약
2장. JSX 렌더링
JSX란 무엇인가?
Hello JSX
선언적 UI 구조
HTML과 같은
내장 HTML 태그
HTML 태그 규약
UI 구조 설명
자신의 JSX 요소 생성
HTML 캡슐화
중첩 요소
네임스페이스 컴포넌트
자바스크립트 표현 사용
동적 프로퍼티 값과 텍스트
컬렉션을 요소에 매핑
JSX의 프래그먼트
래퍼 요소
프래그먼트를 사용해 불필요한 태그 제거
요약
3장. 컴포넌트 프로퍼티, 상태 그리고 컨텍스트
컴포넌트 상태란 무엇인가?
컴포넌트 프로퍼티란 무엇인가?
컴포넌트 상태 설정
초기 컴포넌트 상태
컴포넌트 상태 설정
컴포넌트 상태 병합
프로퍼티 값 전달하기
기본 프로퍼티 값
프로퍼티 값 설정
무상태 컴포넌트
순수 함수형 컴포넌트
함수형 컴포넌트 기본값
컨테이너 컴포넌트
컨텍스트 제공 및 사용
요약
4장. 이벤트 핸들링 - 리액트 방식
이벤트 핸들러 선언
핸들러 함수 선언
다중 이벤트 핸들러
제네릭 핸들러 임포트
이벤트 핸들러 컨텍스트와 매개변수
Auto-binding context
컴포넌트 데이터 가져오기
고차 이벤트 핸들러
인라인 이벤트 핸들러
요소에 핸들러를 바인딩
통합 이벤트 객체
이벤트 풀링
요약
5장. 재사용할 수 있는 컴포넌트 제작
재사용할 수 있는 HTML 요소
일체형 컴포넌트의 어려움
JSX 마크업
초기 상태와 상태 헬퍼
이벤트 핸들러 구현
컴포넌트 구조 리팩토링
JSX로 시작
article 목록 컴포넌트 구현
article 항목 컴포넌트 구현
article 컴포넌트 추가 기능 구현
함수형 컴포넌트 만들기
렌더 프롭 활용
컴포넌트
이 책의 대상 독자
입문자나 전문가를 포함한 모든 자바스크립트 개발자를 위해 만들어졌다. 페이스북의 UI 라이브러리 사용법을 배우고 싶은 사람도 포함된다. 리액트에 대한 지식은 필요 없지만 ES2015에 대한 실무 지식이 있으면 더욱 잘 이해할 수 있다.
이 책의 구성
1장, ‘왜 리액트인가?’에서는 리액트가 무엇인지, 왜 사용하고 싶은지에 대해 알아본다.
2장, ‘JSX 렌더링’에서는 JSX가 리액트에서 콘텐트를 렌더링할 때 사용하는 구문이라는 것에 대해 알아본다. HTML이 가장 보편적인 결과지만 JSX를 사용하면 네이티브 UI 컴포넌트 등을 렌더링할 수 있다.
3장, ‘컴포넌트 프로퍼티, 상태 그리고 컨텍스트’에서는 프로퍼티가 컴포넌트에 전달되는 방법과 상태가 변경될 때 컴포넌트를 재렌더링하는 방법에 대해 알아본다.
4장, ‘이벤트 핸들링？리액트 방식’에서는 리액트의 이벤트가 JSX에서 구체화된다는 것과 리액트가 이벤트를 어떻게 처리하고 코드가 해당 이벤트에 어떻게 반응해야 하는지에 대해 알아본다.
5장, ‘재사용할 수 있는 컴포넌트 제작’에서는 컴포넌트가 종종 더 작은 컴포넌트들을 사용해 구성된다는 것에 대해 알아본다. 이는 데이터 및 동작을 하위 컴포넌트에 올바르게 전달해야 한다는 것을 의미한다.
6장, ‘리액트 컴포넌트 생명주기’에서는 리액트 컴포넌트가 어떻게 만들어지고 파괴되는지에 대해 알아본다. 이에는 네트워크에서 데이터를 가져오는 것과 같은 여러 다른 생명주기(Lifecycle 이벤트가 있다.
7장, ‘컴포넌트 프로퍼티 검증’에서는 리액트에 컴포넌트로 전달되는 프로퍼티 유형의 유효성을 검사하는 메커니즘이 있다는 것을 알아본다. 이를 통해 컴포넌트에 예기치 못한 값이 전달되지 않는다는 사실을 확인할 수 있다.
8장, ‘컴포넌트 확장’에서는 컴포넌트를 확장하는 데 사용되는 메커니즘에 대해 소개한다. 이는 상속과 고차 컴포넌트(higher-order components를 포함한다.
9장, ‘라우트를 통한 내비게이션 처리
