추가 적립 안내

리액트와 리덕스로 구축하는 생동감 넘치는 웹 UI의 세계!

페이스북은 컴포넌트와 웹사이트에 놀라운 사용자 경험을 선사하기 위해 리액트를 개발했다. 리액트의 핵심인 상태 관리, 데이터 흐름, 그리고 렌더링을 위한 현명한 디자인 때문에 사고하기 쉽고 부드럽게 애플리케이션을 실행할 수 있다. 게다가 놀랍도록 풍부한 컴포넌트와 라이브러리 생태계는 개발자와 사용자 모두에게 큰 도움을 준다.

이 책은 리액트를 이용해 구체화하는 기술을 제시한다. 독자들은 모든 장의 구체적인 예제들을 빠르게 실행해 볼 수 있다. 또한, 렌더링, 생명주기 메서드, JSX, 데이터 흐름, 폼, 라우팅, 서드파티 라이브러리의 통합, 그리고 테스트 등 핵심 주제들을 마스터할 수 있다. 그리고 이 책에서 설명하는 애플리케이션 디자인 기법은 많은 개발자들이 눈에 띄는 앱을 개발하는 데 도움이 될 것이다. 마지막으로 리액트를 풀스택 애플리케이션에 통합하는 방법을 알아보고 리덕스를 이용한 상태 관리, 서버 측 렌더링, 그리고 모바일 UI를 위한 리액트 네이티브 등도 학습한다.

개념과 현실 세계의 예제를 통합한 단 한 권의 도서
- Phaneendra Bommareddy, 오픈로직스

이 책을 읽고 리액트를 활용하자. 그리고 다시는 되돌아보지 말자.
- Michal Paszkiewicz, 런던 교통국

리액트와 리덕스를 이용해 애플리케이션을 개발하고자 하는 모두를 위한 필독서
- Andrew Courter, 피보탈

쉬운 해설, 필요한 모든 단계에 대한 상세한 설명, 풍부한 예제 코드는 리액트의 길에 이르는 등불을 밝혀준다.
- Olivier Ducatteeuw, 벨기에 루벤대학교

PART 1 리액트 소개 1
CHAPTER 1 리액트를 만나다 3
1.1 리액트 시작하기 4
1.2 리액트가 적합하지 않은 경우 10
1.3 가상 DOM 15
1.4 컴포넌트: 리액트의 기본 단위 20
1.5 팀을 위한 리액트 23
1.6 요약 24
CHAPTER 2 첫 번째 컴포넌트 26
2.1 리액트의 컴포넌트에 대해 알아보기 28
2.2 리액트 컴포넌트 개발하기 36
2.3 컴포넌트의 수명과 시간 49
2.4 JSX와의 첫 만남 60
2.5 요약 64

PART 2 리액트의 컴포넌트와 데이터 67
CHAPTER 3 리액트의 데이터와 데이터 흐름 69
3.1 상태 69
3.2 리액트에서의 상태 76
3.3 컴포넌트 간의 통신 86
3.4 단방향 데이터 흐름 87
3.5 요약 90
CHAPTER 4 리액트의 렌더링과 생명주기 메서드 91
4.1 레터스 소셜 저장소 셋업하기 92
4.2 렌더링 과정과 생명주기 메서드 97
4.3 레터스 소셜 앱 개발 시작하기 118
4.4 요약 126
CHAPTER 5 폼 다루기 128
5.1 포스트 생성하기 129
5.2 폼 다루기 133
5.3 새 포스트 생성하기 145
5.4 요약 147
CHAPTER 6 서드파티 라이브러리의 통합 148
6.1 레터스 소셜 API에 포스트 전송하기 149
6.2 지도를 이용해 컴포넌트를 개선하기 151
6.3 요약 172
CHAPTER 7 리액트의 라우팅 173
7.1 라우팅의 기초 174
7.2 라우터 구현하기 177
7.3 요약 192
CHAPTER 8 고급 라우팅과 파이어베이스의 통합 194
8.1 라우터 사용하기 195
8.2 파이어베이스와의 통합 208
8.3 요약 216
CHAPTER 9 리액트 컴포넌트의 테스트 217
9.1 테스트의 종류 220
9.2 Jest, Enzyme, React-test-renderer를 이용한 리액트 컴포넌트의 테스트 223
9.3 처음 작성하는 테스트 코드 225
9.4 요약 245

PART 3 리액트 애플리케이션 아키텍처 247
CHAPTER 10 리덕스 애플리케이션 아키텍처 249
10.1 플럭스 애플리케이션 아키텍처 251
10.2 리덕스 액션 생성하기 258
10.3 요약 280
CHAPTER 11 리액트에 리덕스 통합하기 282
11.1 리듀서는 상태가 어떻게 변경되어야 하는지를 결정한다 283
11.2 리액트에 리덕스 통합하기 299
11.3 요약 312
CHAPTER 12 서버 측 리액트와 리액트 라우터 314
12.1 서버 측 렌더링이란? 316
12.2 왜 서버에서 렌더링을 해야 할까? 320
12.3 SSR이 필요하지 않은 경우 323
12.4 서버에서 컴포넌트 렌더링하기 324
12.5 리액트 라우터 라이브러리 331
12.6 리액트 라우터로 인증 라우트 처리하기 337
12.7 데이터를 포함한 서버 측 렌더링 341
12.8 요약 352
CHAPTER 13 리액트 네이티브 소개 354
13.1 리액트 네이티브 355
13.2 리액트와 리액트 네이티브 358
13.3 언제 리액트 네이티브를 사용할 것인가? 361
13.4 세상에서 제일 간단한 ‘Hello World’ 앱 363
13.5 앞으로의 여정 367
13.6 요약 368

부록: 리액트 16.3 이후 생명주기 메서드 변경 사항 370

리액트의 멘탈 모델이 강력한 이유는 무엇일까? 이 모델은 컴퓨터 공학 및 소프트웨어 엔지니어링 기법의 깊숙한 영역과 결부되어 있다. 리액트의 멘탈 모델은 함수적(functional) 개념과 객체지향(object-oriented)을 결합하고 있으며, 컴포넌트를 UI 개발의 주요 단위로 보고 있다.
_4쪽

리액트의 상태를 조금 더 잘 이해할 수 있도록 하기 위해 ‘상태’라는 것이 무엇인지 일단 생각해 보자. 지금까지 프로그램 내의 상태에 대해 생각해 보거나 들어본 적이 없다 하더라도 최소한 예전에 본 적은 있을 것이다. 지금까지 여러분이 작성했던 대부분의 프로그램들은 일종의 상태를 가지고 있다. Vue.js, 앵귤러 혹은 엠버 등의 프런트엔드 프레임워크를 사용해 본 적이 없다 하더라도 분명 상태의 개념을 가지고 있는 UI를 작성해 봤을 것이다.
_70쪽

라우팅을 활용하려면 먼저 라우팅이 무엇인지를 먼저 이해해야 한다. 라우팅은 모든 웹사이트와 웹 애플리케이션의 핵심이다. 간단한 정적 HTML 페이지부터 복잡한 리액트 웹 애플리케이션에 이르기까지 중심적인 역할을 수행하는 것이 바로 라우팅이다. URL에 어떤 동작을 매핑하고자 한다면 무조건 라우팅이 필요하다.
_174쪽

현대의 애플리케이션들은 이전 세대의 애플리케이션에 비해 훨씬 많은 작업을 수행해야 하며, 그래서 내외부적으로 더 복잡할 수밖에 없다. 개발자들은 포괄적인 디자인 패턴을 적용하지 않은 채 계속해서 비대해지는 복잡한 애플리케이션이 어떤 혼란을 가져오는지 이미 잘 알고 있다. 스파게티 코드는 일하는 재미가 없을 뿐 아니라 개발자들이 제 속도를 내지 못해서 비즈니스 역시 제대로 성장하지 못하는 결과를 가져왔다.
_251쪽

리액트 네이티브를 이용하면 자바스크립트와 네이티브 코드를 섞어서 애플리케이션을 개발할 수 있다. 이것이 가능한 이유는 리액트 네이티브가 모바일 플랫폼과 애플리케이션 사이에 일종의 다리(bridge)를 놓아주기 때문이다. 대부분의 모바일 기기는 자바스크립트를 실행할 수 있으며, 리액트 네이티브는 이 장점을 이용해 자바스크립트를 실행한다.
_356쪽