★ 이 책에서 다루는 내용 ★

■ 좀 더 효율적인 개발을 위한 강력한 React 도구 설치
■ 프로퍼티와 자식이 있는 React 엘리먼트 생성
■ 상태가 없는 React 컴포넌트와 상태 기반의 React 컴포넌트 소개
■ React 개발 과정을 빠르게 하기 위한 JSX 사용
■ React 컴포넌트에 생명주기 메소드를 이용해서 반응성 추가
■ React 컴포넌트를 다른 자바스크립트 라이브러리와 통합
■ Flux 애플리케이션 아키텍처를 React 컴포넌트와 함께 활용
■ Jest 테스트 프레임워크를 이용해서 React 컴포넌트 테스트


★ 이 책의 대상 독자 ★

이 책은 확장 가능하고 유지보수 가능한 웹 사용자 인터페이스를 개발하고자 하는 프론트엔드 개발자들을 위해 만들어졌다. 자바스크립트, HTML, CSS의 핵심 지식 일부만 알아도 React.js가 웹 개발 세계에 가져온 혁신적인 아이디어의 이점을 활용하는 데에 충분하다. 제이쿼리나 Angular.js를 다뤄 본 경험이 있다면, React.js가 어떻게 다른지 그리고 여러 가지 라이브러리들과 통합시켜서 어떻게 이용할지 이해하는 데 큰 도움이 될 것이다.


★ 이 책의 구성 ★

1장, ‘필요한 도구 설치’에서는 이 책의 목표를 간결하게 서술하고, React 애플리케이션을 효율적으로 개발하는 데 필요한 최신 도구들을 설명한다. 각 도구들을 소개하고 설치하는 방법들에 대해 단계별로 알아본다. 그런 다음, 이 책을 통해 개발하게 될 프로젝트의 구조를 생성한다.

2장, ‘첫 React 엘리먼트 생성’에서는 React를 설치하는 방법을 설명하고 가상 DOM을 소개한다. 그런 다음, React 엘리먼트 정의와 네이티브 자바스크립트 문법을 이용해서 생성하고 렌더링하는 방법을 설명한다. 마지막으로 JSX 문법을 소개하고 JSX를 이용해서 React 엘리먼트를 만드는 방법을 살펴본다.

3장, ‘첫 React 컴포넌트 생성’에서는 React 컴포넌트를 소개한다. 상태가 없는(stateless) React 컴포넌트와 상태 기반(stateful)의 React 컴포넌트 간의 차이점, 그리고 어느 컴포넌트를 사용할지 결정하는 방법을 설명한다. 그런 다음, 두 종류를 생성하는 과정을 살펴본다.

4장, ‘React 컴포넌트에 반응성 추가’에서는 React로 문제를 해결하는 방법을 설명하고 React 애플리케이션을 계획하는 과정을 단계별로 알아본다. 이 책에서 개발하는 React 애플리케이션 전체를 캡슐화하는 React 컴포넌트를 생성한다. 부모 React 컴포넌트와 자식 컴포넌트 사이의 관계를 설명한다.

5장, ‘다른 라이브러리와 함께 React 컴포넌트 사용’에서는 서드파티 자바스크립트 라이브러리와 함께 React 컴포넌트를 사용하는 방법을 살펴본다. React 컴포넌트의 생명주기를 소개하고, 마운트 메소드를 사용하는 방법을 설명한다. 그리고 이 책의 프로젝트를 위한 새로운 React 컴포넌트를 생성한다.

6장, ‘React 컴포넌트 업데이트’에서는 React 컴포넌트 생명주기의 업데이트 메소드를 소개한다. 자바스크립트에서 CSS 스타일을 사용하는 방법을 알아보고, 기본 컴포넌트의 프로퍼티를 검사하고 설정하는 방법을 설명한다.

7장, ‘복잡한 React 컴포넌트 생성’에서는 좀 더 복잡한 React 컴포넌트를 개발하는 방법에 초점을 맞춘다. 여러 가지의 React 컴포넌트를 구현하는 방법과 해당 컴포넌트들을 하나로 결합하면서도 정상 작동되는 React 애플리케이션으로 만드는 방법에 대해 자세히 살펴본다.

8장, ‘Jest를 사용한 React 애플리케이션 테스트’에서는 유닛 테스트 개념과 Jest를 이용해서 유닛 테스트를 작성하고 실행하는 방법을 설명한다. 또한 React 컴포넌트를 테스트하는 방법도 보여준다. 테스트 스위트, 스펙, 예상 결과, 부합기(matcher)에 대해 알아본다.

9장, ‘Flux를 사용해 React 아키텍처 향상시키기’에서는 React 애플리케이션 아키텍처를 향상시키는 방법을 알아본다. Flux 아키텍처를 소개하고 디스패처, 스토어, 액션 생성자에 대해 설명한다.

10장, ‘Flux를 사용한 React 애플리케이션의 유지보수 준비’에서는 Flux를 이용해서 React 애플리케이션에 대한 우려 사항들을 분리하는 방법을 설명한다. 장차 유지보수가 어렵지 않도록 React 애플리케이션을 리팩토링한다.


★ 지은이의 말 ★

오늘날의 웹은 이전과는 다르다. 웹을 개발하는 방식이 달라졌다. 제이쿼리가 생성한 유지보수가 불가능한 명령형 코드를 다루어야 하는 문제에 직면했고, 현대의 복잡한 사용자 인터페이스를 관리할 수 있는 새로운 방법을 찾아야 했다. 자바스크립트를 이용해 선언형, 모듈식의 빠르고 확장 가능한 프론트엔드 애플리케이션 개발을 가능하게 하는 새로운 사용자 인터페이스 라이브러리가 필요했다.
페이스북에서 개발한 자바스크립트 사용자 인터페이스 라이브러리인 React.js를 소개한다. React.js는 DOM을 이용해서 작업하는 방법, 애플리케이션의 데이터 흐름을 체계화하는 방법, 그리고 인터페이스 엘리먼트를 개별 컴포넌트로 생각하는 방법에 대해 엄청난 아이디어를 가져왔다. 그렇지만, 나머지 기술 스택에 대한 요구 조건은 없는 사용자 인터페이스 라이브러리다.
Flux와 결합되면, 숙련된 개발자뿐만 아니라 프론트엔드를 처음 접하는 개발자에게도 유용하며 강력한 프론트엔드 아키텍처를 얻을 수 있다.
당장 또는 언젠가는 온갖 종류의 개발 이슈들을 해결해야 하는 모든 프론트엔드 개발자들에게 좀 더 나은 미래를 제공할 것이다.

★ 옮긴이의 말 ★

2015년 1월, 페이스북은 리액트 네이티브를 처음 공개했다. 이전부터 자바스크립트를 이용해서 모바일 앱 개발을 시도한 경우는 많았지만 대부분이 웹뷰(Webview)를 이용한 하이브리드 앱이었다. 하지만 리액트 네이티브를 통해, 자바스크립트로 작업해서 네이티브 앱을 개발하는 것이 가능해졌다. 처음 공개 시에는 iOS용 리액트 네이티브만 공개했으나 곧 안드로이드용을, 그리고 최근에는 윈도우 10뿐만 아니라 타이젠 개발까지 가능해졌다고 발표했다. Tom Occhino는 첫 공개 당시 자신의 블로그에서 다음과 같이 말했다.

“우리는 ‘Write once, run anywhere(한 번만 코딩하여, 모든 플랫폼에서 동작한다)’를 추구하는 것이 아니다. 모든 플랫폼들은 서로 다른 룩앤필과 장점을 갖고 있기 때문에 여전히 각 플랫폼마다 개별적으로 앱을 개발해야 한다. 하지만 이제는 어떤 플랫폼을 선택하든 상관없이 개발자들은 새로운 기술을 배우지 않고도 앱 개발이 가능해졌다. 그리고 우린 ‘learn once, write anywhere (한 번의 공부로, 모든 플랫폼에 적용한다)’라고 말할 수 있다.”

이 기술은 자연스레 많은 모바일 앱 개발자들의 관심을 끌었다. 그리고 이 기술의 가장 기본이자 시작은 바로 이 책에서 소개하고 있는 React.js다.
React.js는 페이스북과 인스타그램의 UI를 위해 만들어진 자바스크립트 라이브러리다. 그리고 페이스북과 인스타그램 같은 지속적으로 데이터가 변경되는 큰 규모의 애플리케이션을 구축하는 문제를 해결하고자 React.js를 개발했다고 이야기하고 있다. 단순함, 선언적 문법, 컴포넌트 이 세 가지 특징으로 React.js는 여러분이 UI를 구성하는 데 매우 직관적이고 효율적인 방안을 제시해 줄 것이다.
이 책은 React.js의 설치부터 시작해, 간단한 컴포넌트에서 다소 복잡한 컴포넌트까지 함께 만들어 보면서 기본적인 React.js의 활용 방법을 설명해주고, 마지막에는 애플리케이션 아키텍처인 Flux를 활용하는 방법까지 자세히 설명한다.
이 책이 React.js가 생소한 개발자에게 효과적인 애플리케이션의 UI 구현 방법을 제시하는 데 많은 도움이 되기를 바란다.