리액트는 엄청난 성공을 거두고 있는 웹 UI 라이브러리다. 리액트는 복잡한 웹앱을 제작할 때에 겪는 흔한 문제를 해결할 뿐만 아니라, 더 쉽게 UI를 구현할 수 있는 다양한 컴포넌트와 기법을 제공한다. 이 책은 JSX, 상태 관리, 생명주기 등 리액트의 핵심 개념뿐만 아니라, 리덕스를 통한 데이터 관리 방법을 설명하며, 최적화된 워크플로우를 따라 고성능의 웹앱을 빠르게 제작할 수 있게 가이드한다.
1판인 『리액트 웹앱 제작 총론』의 내용을 전체적으로 보강하고, 실무에 필요한 외부 데이터 사용하기, 성능 이슈, 리덕스에 관해서도 다룬다.

■ 첫 리액트 앱 제작
■ UI 요소를 정의하는 컴포넌트 개발
■ 여러 컴포넌트를 결합한 복합적인 UI 구현
■ 자바스크립트 대신 JSX를 사용한 비주얼 구현
■ 앱의 상태 관리
■ 리액트 방식의 스타일 적용
■ 컴포넌트 생명주기의 이해
■ 라우팅과 뷰를 이용한 싱글 페이지 앱 제작
■ 리덕스를 사용한 앱 데이터와 상태의 쉬운 관리

1장. '리액트 소개'에서는 리액트가 하는 일과 그 이유에 대해 개괄적으로 소개한다.
2장. '첫 번째 리액트 앱'에서는 render 메소드에 h1 태그를 정의할 때의 JSX에 대해 알아본다.
3장. '리액트 컴포넌트'에서는 리액트를 리액트답게 만드는 것 중 하나인 컴포넌트를 배운다. 4장. '리액트 스타일링'에서는 CSS 스타일 규칙을 사용하는 방법과는 다른, 리액트가 자바스크립트에 인라인 방식으로 스타일링하는 모습을 볼 수 있다. HTML과 비슷한 XML 문법을 사용해 자바스크립트에서 UI를 통째로 선언하는 방법을 JSX를 통해 배운다.
5장. '복잡한 컴포넌트 제작'에서는 다양한 계층의 컴포넌트를 다루며, 여러 부모와 여러 자식 사이의 속성 전달 방법을 알아본다.
6장. '속성 전달'에서는 여러 계층에서 속성 전달을 좀 더 쉽게 할 수 있는 방법을 알아본다.
7장. 'JSX와의 재회'에서는 JSX를 알아야 할 필요가 있는 사항을 깊이 들여다보기 위해 역진 추적(backtracking)과 전진 추적(forwardtracking)을 배운다.
8장. '상태 다루기'에서는 상태 보존 컴포넌트로 무엇을 할 수 있는지 알아본다.
9장. '데이터에서 UI로'에서는 실전에서 보게 될 일반적인 시나리오에서 겪을 수 있는 난관을 줄이는 방법을 알아본다.
10장. '이벤트'에서는 이벤트 처리와 관련한 여러 가지 사항을 알아본다. 리액트가 이벤트를 취급하는 방법은 약간 다르며, 그 차이에 세심한 주의를 기울이지 않으면 놀라게 될 일이 많을 것이다. 몇 개의 간단한 예제로 시작해, 점점 더 이상하고 복잡하고 짜증나는 상황을 해결해나가는 방법을 배운다.
11장. '컴포넌트 생명주기'에서는 생명주기 메소드와 이를 통해 할 수 있는 일들에 관해 논의한다.
12장. 'DOM 엘리먼트 접근'에서는 DOM 엘리먼트에 직접 접근할 수 있는 쉬운 방법을 알아본다.
13장. '리액트 개발 환경 구성’에서는 리액트 자체보다는 리액트 앱을 개발하기 위한 환경 구성에 관한 내용을 다룬다.
14장. ’외부 데이터 사용'에서는 외부 데이터를 다루는 데 필요한 자바스크립트의 모든 것과 리액트 앱 내부에서 작동하게 하는 모든 방법을 배운다.
15장. 'Todo List 앱 제작'에서는 지금까지 배운 많은 개념과 기법을 총동원해 Todo List 앱을 개발할 것이다.
16장. ‘슬라이드 메뉴'에서는 UI 부문에서 자주 등장하는 슬라이드 메뉴를 리액트로 만들어 본다.
17장. ‘불필요한 렌더링 방지'에서는 render 메소드의 정체를 알아보고, render 메소드가 호출되게 하는 방법을 설명한다.
18장. ‘리액트 라우터를 이용한 싱글 페이지 앱 제작'에서는 리액트를 이용해 간단한 싱글 페이지 앱(SPA)을 만들어본다.
19장. ‘리덕스 소개'에서는 리덕스의 주요 기능의 개념을 알아보고, 기능을 실현하는 코드도 직접 살펴본다.
20장. '리액트와 리덕스'에서는 리액트 프로젝트에서 리덕스가 가장 인기 있는 이유를 알아보고, 리액트와 리덕스를 통합해 개발해본다.

리액트는 새로 등장하는 웹 프레임워크와 라이브러리 중에서도 특히 엄청난 성공을 거두고 있다. 리액트는 복잡한 앱을 제작할 때 마주치는 대부분의 일반적인 문제를 다룰 뿐 아니라, 복잡한 앱의 비주얼을 더 쉽게 구현할 수 있는 추가 기법들을 제공한다.
리액트는 초보자가 쉽게 접근하기 어렵다. 이 책을 보기 전까지는 말이다.리액트의 핵심을 이해하고 놀라운 고성능의 실전 앱을 제작할 수 있도록 크루파 친나탐비가 생생하고 분명하게 설명할 것이다.
이 책은 몇 분만에 첫 리액트 앱을 만들어 구동할 수 있게 하는 유일한 책으로, 어려운 개념을 시각화한 풍부한 그림과 단계별로 진행되는 실전 예제로 가득하다.

크루파 친나탐비(Kirupa Chinnathambi)

자신만큼이나 웹 개발을 사랑하는 사람들을 교육하며 많은 시간을 보냈다. 블로깅이라는 단어조차 없었던 1999년부터 자신의 웹사이트(kirupa.com)에 튜토리얼을 포스팅하기 시작했다. 그 후로 지금까지 수백 개의 글을 쓰고 다수의 책을 저술했으며, 유튜브에서 시청할 수 있는 수십 개의 튜토리얼 비디오를 제작했다. 웹 개발에 대해 글을 쓰거나 강의하는 시간 이외에는 마이크로소프트의 프로그램 매니저로서 웹을 더욱 굉장하게 만드는 일을 한다.
트위터(@kirupa), 페이스북(facebook.com/kirupa), 이메일(kirupa@kirupa.com)을 통해 언제든지 연락할 수 있다.

2000년대 중반부터 시작된 자바스크립트 춘추전국시대는 10년 넘게 계속되고 있습니다. 숱한 자바스크립트 프레임워크나 라이브러리가 등장했다가 사라지거나 변모해왔으며, 앞으로도 그런 상황은 계속될 것 같습니다. 2010년 중반 즈음부터의 대표적인 자바스크립트 UI 프레임워크로는 리액트(React), 앵귤러(Angular), 뷰(Vue.js)를 들 수 있습니다. 설문을 포함한 몇몇 조사 결과를 봤을 때, 그 가운데 가장 인기 있는 프레임워크는 (여전히) 리액트로 보입니다.
리액트는 페이스북이 2013년 5월에 오픈소스로 발표한 이후 지금까지 꾸준히 사랑받고 있으며 페이스북, 인스타그램, 넷플릭스, 야후 등 여러 유명한 사이트에서 사용되고 있습니다. 모든 프레임워크가 그러하듯 리액트 역시 장단점이 있겠지만, 특히 가상 DOM을 사용함으로써 렌더링 성능을 높인 점이나 일방향 데이터 흐름을 지향해 이해와 관리를 쉽게 할 수 있도록 하는 점이 인기의 주요인으로 추측됩니다.
앞으로도 자바스크립트 세계의 지형 변화 속에서 또 다른 프레임워크나 라이브러리를 사용할 기회가 많이 생길 것입니다. 그러므로 리액트를 사용해 보는 일은 많은 프로젝트가 리액트를 채택하는 것에 동참하는 일이자, 웹 기술에 관한 통찰력를 쌓는 데 필요한 큰 자양분이 될 것입니다.
그렇지 않아도 배워야 할 것이 너무 많아서 늘 바쁜 여러분 앞에, 빠르게 리액트를 소화시켜줄 이 책이 놓여있습니다. IT 분야에서 고군분투하는 모든 분들의 건투를 빕니다.

이태상

자바와 웹 전문가로서 주로 교육과 컨설팅을 했으며, 오랜 기간 동안 전자 금융 업무를 담당했다. 현재 한 금융기관의 재무회계시스템 구축 프로젝트에 참여하고 있다. 『톰캣 최종분석』(에이콘, 2005)부터 『Pandas로 하는 데이터 과학 2/e』(에이콘, 2018)까지 다수의 IT 서적을 번역했다.