리액트 네이티브는 페이스북의 오픈 소스 자바스크립트 라이브러리인 리액트를 기반으로 이미 친숙한 웹 기술을 사용하면서도 순수 네이티브 앱과 동일한 성능과 UI를 갖는 모바일 앱을 개발할 수 있도록 하는 라이브러리다. 이 책은 리액트와 리액트 네이티브의 핵심 개념으로 시작해, 크로스 플랫폼 모바일 앱 제작에 필요한 다양한 기능뿐만 아니라 네이티브 모듈 제작, 디버깅, 성능 튜닝까지 고급 기법들을 다룬다. 이 책 한 권으로 실전에 필요한 리액트 네이티브 기술을 모두 통달할 수 있을 것이다.

★ 이 책에서 다루는 내용 ★

■ 리액트 네이티브 컴포넌트와 API 활용
■ 리액트의 JSX 문법 학습
■ 리덕스와 리덕스 미들웨어를 사용한 데이터 관리
■ iOS와 안드로이드 모두를 위한 리액트 네이티브 앱 제작
■ 애니메이션 API를 사용한 애니메이션 효과 적용
■ 라우팅과 내비게이션의 비교
■ 자신만의 네이티브 모듈 제작
■ 플렉스박스를 사용한 레이아웃과 고급 애니메이션의 적용
■ 써드파티 라이브러리 통합과 커스텀 네이티브 컴포넌트 개발
■ 리덕스, 리덕스 미들웨어, 원격 API와의 조합을 통한 확장성 높은 데이터 중심의 앱 제작

★ 이 책의 대상 독자 ★

이 책은 독자가 자바스크립트를 충분히 이해하며 에크마스크립트(ECMAScript)2015(ES2015 또는 ES6)에 친숙하다고 가정한다. 이 책의 예제 코드는 클래스, 화살표 함수, 비구조화, 스프레드 연산 등 ES2015의 특징을 십분 활용하기 때문이다. 리액트, 모바일 개발, HTML, CSS에 능숙하면 도움이 되겠지만 필수 사항은 아니다.

★ 이 책의 구성 ★

1장, '리액트 기초 다지기'에서는 리액트의 전반을 설명하고 리액트 방식으로 사고하는 법을 알려준다. 효과적인 리액트 네이티브 작업을 위해서는 먼저 리액트의 이해가 필수다.
2장, '리액트 네이티브식 '헬로 월드!''에서는 리액트 네이티브의 작동 원리를 알아보고 다른 유명한 모바일 개발 플랫폼들과 비교해본다. 그 다음 컴퓨터에 iOS를 위한 리액트 네이티브 개발 환경을 구축하는 방법을 알려준다.
3장, '스타일과 레이아웃'에서는 리액트 네이티브에서는 캐스케이딩 스타일 시트(Cascading Style Sheets(CSS))의 장점 등을 포함해 웹 개발 세계로부터 많은 개념을 차용한다. 이와 동시에 CSS의 덜 바람직한 부분들은 철저히 배제한다. 또한 리액트 네이티브 앱에 스타일을 적용하는 방법과 컴포넌트 레이아웃을 위한 플렉스박스(Flexbox)의 사용법을 공부한다.
4장, '리액트 네이티브 컴포넌트'에서는 다수의 강력한 컴포넌트와 API를 제공한다. 또한 그런 컴포넌트와 API를 사용해 RNNYT라는 뉴스 리더 앱 제작을 시작한다.
5장, '플럭스와 리덕스'에서는 일반적인 모델-뷰-컨트롤러 패턴을 꺼려하며, 플럭스(Flux)라는 일방향 데이터 흐름 패턴을 선호한다. 5장에서는 플럭스의 사상을 이해하고, 유명한 플럭스 구현체인 리덕스(Redux)의 사용법을 배운다.
6장, 'NYT API와 리덕스의 통합'에서는 뉴스 리더 앱인 RNNYT에 생명을 불어넣기 위해 데이터 관리와 뉴욕 타임스 API 통신을 위한 리덕스와 리덕스 미들웨어를 구현해본다.
7장, '내비게이션과 고급 API'에서는 내비게이션의 여러 선택 사항 중 어느 방식을 선택해야 할지를 논의한다. 그 다음엔 NaviagtionExperimental이라는 컴포넌트와 그 밖의 다른 리액트 네이티브 API를 앱에 적용한다.
8장, '애니메이션과 제스처 리액트 네이티브'에서는 자연스러운 애니메이션을 만드는 두 가지 방법을 제공한다. 또한 RNNYT에 터치 제스처가 지원되는 온보딩 경험 구축을 통해 각 방법을 적용하는 방법을 설명한다.
9장, '안드로이드를 위한 리팩토링'에서는 크로스 플랫폼 개발을 쉽게 해준다. 그러나 안드로이드를 위한 개발 환경을 구성하는 일이 아주 쉽지만은 않다. 안드로이드 개발을 위해 필요한 모든 툴의 설치와 설정을 단계적으로 진행한다. 그 다음엔 앱을 크로스 플랫폼용으로 리팩토링해 일급 안드로이드 앱으로서의 면모를 갖추게 한다.
10장, '네이티브 모듈의 작성과 사용'에서는 iOS와 안드로이드를 위해 각각 오브젝티브-C와 자바로 커스텀 네이티브 코드를 작성하고 사용하는 방법을 설명한다. 놀라운 부분 중 하나는 이 프레임워크에 포함된 컴포넌트와 API만 사용하도록 제한을 두지 않는다는 점에 있다. 앱에 뭔가 평범하지 않은 기능을 넣고 싶다면, 커스텀 네이티브 코드를 만들어 연계하거나 써드파티 라이브러리를 포함시키면 된다.
11장, '앱 출시 준비'에서는 제스트(Jest)라는 테스트 프레임워크와 성가신 성능 문제를 적발할 수 있는 여러 툴을 소개한다. 마지막으로, iOS와 안드로이드의 스토어에 앱을 배포하는 방법을 설명한다.
12장, '리액트 네이티브 툴과 참고자료'에서는 리액트 네이티브 앱의 제작 경험을 증진시켜줄 여러 툴을 소개한다. 그 다음 웹, 맥 OS, 심지어 윈도우까지 지원하는 몇 가지 리액트 네이티브 프로젝트들을 알아본다.

1장. 리액트 기초 다지기

__프레임워크 또는 라이브러리
__리액트 탄생의 배경
__리액트 시작하기
__JSX로 컴포넌트 작성
__컴포넌트
__컴포넌트 조합
__속성과 속성 타입
____속성받기
____속성 타입
____속성 전달
____기본 속성값
____Props.children
__이벤트 핸들러
__상태
__컴포넌트 생명주기
____컴포넌트 업데이트
____컴포넌트 언마운트
__컴포넌트 유형
____React.createClass
____함수형 컴포넌트
__정리


2장. 리액트 네이티브식 '헬로 월드!'

__모바일 앱 개발 환경의 이해
____어도비 폰갭
____Ionic
____NativeScript
____리액트 네이티브
__리액트 네이티브 툴의 이해
____엑스코드구글 크롬
____홈브류
____노드JS와 npm
____왓치맨
____플로
____리액트 네이티브 CLI
__툴 설치
____엑스코드 설치
____홈브류 설치
____노드와 npm 설치
____왓치맨과 플로 설치
____리액트 네이티브 CLI 설치
__첫 번째 리액트 네이티브 앱
____리액트 네이티브 패키저
__HelloWorld 앱의 이해
____ES2015 임포트문
____HelloWorld 컴포넌트
____스타일 부분
____루트 컴포넌트 등록
____React를 임포트하는 이유
__리액트 네이티브 앱 디버깅
____크롬 디버거
____중단점
__정리


3장. 스타일과 레이아웃 리액트 네이티브

__스타일 구성과 적용
____인라인 스타일
____스타일 객체
__스타일시트
____컴포넌트에 특정적인 스타일 속성
__상속 없는 스타일링
__박스 모델과 플렉스박스
____박스 모델
____플렉스박스
____또 다른 축 다루기
____크기 조절
__텍스트 스타일링
____텍스트 스타일 속성
____텍스트 스타일 캡슐화
__이미지 스타일링
____배경 이미지
__스타일 조사와 디버깅
____리액트 네이티브 인스펙터
__유사 미디어 쿼리 기능 추가
____Dimensions 객체
____onLayout 핸들러
__정리


4장. 리액트 네이티브 컴포넌트 리액트 네이티브

__네이티브 컴포넌트
____Text
____View
____Image
____Touchable
____ListView
____Modal
____WebView
____TabBarIOS
____TextInput
____그 외의 입력 컴포넌트
__네이티브 API
____ActionSheetIOS
____AlertVibration
____StatusBar
__정리


5장. 플럭스와 리덕스

__플럭스 아키텍처
____Motivation
____플럭스 구현하기
__리덕스 시작하기
____리덕스의 기본 원칙
____리덕스 설치
____리덕스 구현하기
____리액트-리덕스
____미들웨어
__정리


6장. NYT API와 리덕스의 통합

__NYT API 데이터의 이해
__리덕스 데이터의 흐름
____리덕스 상태 트리 만들기
____앱에 리덕스 데이터 연결하기
____리팩토링과 리셰이핑
____리셀렉트 도입
____검색 기능 추가
__비동기식 요청으로 NYT API 연결하기
____iOS ATS에 대한 조치
____ '당겨서 새로고침'과 '로딩 스피너'
__정리


7장. 내비게이션과 고급 API

__내비게이션
____NavigatorIOS
____Navigator
____NavigationExperimental
____내비게이션 API의 선택
__Navigator의 사용
____Navigator 컴포넌트
____내비게이션바
__NavigationExperimental의 사용
____내비게이션 상태 표현하기
____내비게이션 상태 관리
____CardStack 컴포넌트
____내비게이션 헤더
____탭내비게이션
____모달 추가
__그 밖의 고급 API
____NetInfo를 이용한 오프라인 메시지
____Linking을 이용한 브라우저 열기
____AsyncStorage를 이용한 북마크 저장
__정리


8장. 애니메이션과 제스처

__LayoutAnimation과 Animated 소개
__기본형 온보딩 구축
____시작하기
__LayoutAnimation
____하나 더!
__Animated
____온보딩의 리팩토링
____온보딩 경험에 Animated 추가
____애니메이션 값 보정
__PanResponder 적용
____PanResponder 보완
__정리


9장. 안드로이드를 위한 리팩토링

__툴 설치
____JDK 설치
____안드로이드 스튜디오 설치
____ANDROID_HOME과 PATH 설정
____안드로이드 에뮬레이터 실행
__RNNYT에 안드로이드 지원 추가
____플랫폼 로직의 분기
____안드로이드를 위한 RNNYT 리팩토링
__정리


10장. 네이티브 모듈의 작성과 사용

__네이티브 모듈 사용하기
____네이티브 모듈 설치
____아이콘 라이브러리 사용하기
__네이티브 모듈 제작
____iOS 네이티브 모듈
____안드로이드 네이티브 모듈
__정리


11장. 앱 출시 준비

__테스트
____단위 테스트
____컴포넌트 테스트
__성능
____말썽쟁이 ListView
____낮은 반응의 터치와 느린 내비게이션
____성능 관련 요약
__실제 기기에서의 실행
____iOS 디바이스에서의 디버깅
____안드로이드 디바이스에서의 디버깅
__앱 배포
____디버깅 코드 제거
____iOS
____안드로이드
__정리


12장. 리액트 네이티브 툴과 참고자료

__리액트 네이티브 에디터, 플러그인, IDE
____아톰과 뉴클라이드
__iOS와 안드로이드를 넘어
____리액트 네이티브 웹 소개
____리액트 네이티브 UWP 플러그인
____리액트 네이티브 맥 OS
__정리

★ 지은이의 말 ★

리액트 네이티브(React Native)는 순수 네이티브 앱이 갖는 성능이나 룩앤필(look and feel)을 포기하지 않으면서도 친숙한 웹 기술을 사용해 모바일 앱을 제작할 수 있는 라이브러리다. 리액트 네이티브는 페이스북(Facebook)의 오픈 소스 자바스크립트 라이브러리인 리액트(React)를 기반으로 하며, 리액트 네이티브를 사용해 만드는 iOS나 안드로이드(Android) 앱은 사실상 자바스크립트로 작성된다. 리액트 개발자는 각 플랫폼별로 새로운 언어나 환경, 모범 사례를 따로 배울 필요가 없기 때문에 리액트 네이티브를 통해 자신의 개발 영역을 더욱 확장할 수 있다.
이 책에서 우리는 리액트, 리액트 네이티브의 핵심 개념, 리액트 네이티브 생태계의 라이브러리와 툴에 관해 살펴볼 것이다. 또한 완전한 리액트 네이티브 애플리케이션을 만드는 실전 목표를 향해 나아갈 것이다. 마지막으로 애니메이션, 내비게이션, 네이티브 모듈, 테스트, 성능 분석 등 유용하면서도 복합적인 리액트 네이티브 개념을 파헤쳐볼 것이다. 이 책의 마지막 페이지를 덮을 때쯤이면 리액트 네이티브를 사용하는 잘 다듬어진 세련된 모바일 앱 제작에 대한 지식으로 무장돼 있을 것이다.

★ 옮긴이의 말 ★

2007년 첫 아이폰이 세상에 나온 이후 10년이 넘은 지금, 모바일 앱은 기상부터 취침까지(심지어는 취침 중에도) 일상 내내 이용하는 필수품이다. 한동안 웹사이트를 주요 서비스로 구축하고 부가적으로 일부 서비스를 모바일 앱으로도 제공하는 게 당연하던 때가 있었다. 시간이 흘러 이제는 모바일 앱을 통한 완전한 서비스 구축을 최우선으로 하고 그 다음 순위로 웹사이트를 구축하거나, 아니면 아예 웹사이트 자체를 배제하기까지 하는 시대가 됐다. 동시에 생산자 역할인 소프트웨어 개발 영역에서는 좀 더 친숙한 여러 기술로 앱을 개발하기 위한 다양한 방법들이 고안됐다.
프로그레시브 웹 앱스(PWA) 때문에 조금 무리일 수 있겠지만 모바일 웹과 웹앱을 편의상 '웹' 분야로 밀어놓고 보자면, 일반적으로 모바일 앱이라 하면 '네이티브 앱'과 '하이브리드 앱', 두 가지로 나눌 수 있다. 그리고 그 두 종류의 앱 개발을 지원하는 서로 다른 다양한 개발 플랫폼이 존재한다. 각자 나름대로의 장단점이 있지만, 앱 개발만을 전문으로 하지 않는 대부분의 사람들이 크게 중점을 두는 사항은 몇 가지 안되며 또한 대개 비슷하다.

1. 오브젝티브-C, 스위프트, 자바(안드로이드SDK)와 같은 네이티브 앱 전용 언어를 새로 배우지 않고도, 이미 알고 있는 웹 기술(HTML, CSS, 자바스크립트)을 사용해 쉽게 개발할 수 있으면 좋겠다.
2. 그렇지만 최종 결과물은 성능과 기능, 사용자 경험 등에 있어서 네이티브 앱 언어로 만든 앱에 뒤떨어지지 않았으면 좋겠다.

현재 각자의 지향점을 가진 특징적인 모바일 앱 개발 기술들이 다수 존재하지만, 위 두 사항을 기준으로 삼고 보면 의외로 선택이 어렵지 않다. 객관적인 통계를 찾지는 못했으나 내가 보고 느낀 현재 이 분야의 양대 강자는 리액트 네이티브와 아이오닉이다. 이 대결 구도가 자바스크립트 영역에서 기인한다는 점은 쉽게 눈치 챌 수 있다. 수년 간 라이벌을 유지해 온 페이스북의 리액트와 구글의 앵귤러가 있기 때문이다. 따라서 많은 사람들이 위의 1번 요건에 따라 모바일 앱 개발 플랫폼을 선택함을 알 수 있다. 그리고 2번 요건이 남아있다. 아하! 이 책을 읽고 있는 여러분은 리액트 네이티브를 선택했다!
감히 특정 기술들을 단순한 잣대로써 우위를 가르고자 함이 아니다. 리액트 네이티브를 선택한 기준이 곧 리액트 네이티브의 특장점이었다는 사실을 확인시켜 주고 싶었다. 그 자세한 내용들은 이 책에서 설명될 것이며, 여러분의 선택이 틀리지 않았음을 알게 될 것이다.
이 책은 수박 겉핥기 식의 개론서도 아니며, 모든 내용을 몽땅 쑤셔 넣은 바이블같은 책도 아니다. 리액트 네이티브를 기초부터 설명하지만 동시에 꼭 필요한 각론들을 망라한, 소위 '한 권으로 끝내는' 교재다(그러나 이 책의 제목으로 쓰기엔 너무 식상했다).
그리고 이 책은 리액트 네이티브를 선택한 현명한 여러분을 배신하지 않을 것이라 믿는다. 날로 복잡해지고 발전하는 모바일 개발 분야에서도 여전히 주체적인 시민이 되기를 기원한다.