리액트 네이티브는 페이스북의 오픈 소스 자바스크립트 라이브러리인 리액트를 기반으로 이미 친숙한 웹 기술을 사용하면서도 순수 네이티브 앱과 동일한 성능과 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, 심지어 윈도우까지 지원하는 몇 가지 리액트 네이티브 프로젝트들을 알아본다.

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

에릭 마시엘로(Eric Masiello)

현재 비스타프린트 디지털(Vistaprint Digital)의 선임 엔지니어다. 이전에는 어드바이저리 보드컴퍼니(Advisory Board Company)의 수석 프론트엔드 엔지니어로 일했으며, 에듀케이션 어드바이저리 보드(Education Advisory Board)의 모바일 앱을 제작했다. 10년 이상 프론트엔드와 UI 개발자로 일했으며, 프리랜서로서 http://synbydesign.com의 웹사이트 디자인과 개발을 담당하고 있기도 하다. 워싱턴 D.C.의 제너럴 어셈블리(General Assembly) 학교에서 프론트엔드를 주제로 강의한 경력이 있으며, 팩트출판사의 비디오 교재인 의 기술 감수도 수행했다.

제이콥 프리드만(Jacob Friedmann)

시애틀에 거주하는 개발자다. 5년 이상 전문 개발자로 일했다. 현재는 오라클(Oracle) 산하의 애드디스(AddThis)에서 수석 소프트웨어 엔지니어로 있으면서 대형 프론트엔드와 백엔드 애플리케이션들을 담당하고 있다. 리액트 네이티브를 사용해 모바일 앱도 개발하는데, 최근에는 앱스토어에 어디시(Audicy(http://audicy.io))를 출시하기도 했다. 또한 제너럴 어셈블리에서 프론트엔드 웹 개발이나 자바스크립트 개발에 관한 여러 강의를 해왔다.

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

1. 오브젝티브-C, 스위프트, 자바(안드로이드SDK)와 같은 네이티브 앱 전용 언어를 새로 배우지 않고도, 이미 알고 있는 웹 기술(HTML, CSS, 자바스크립트)을 사용해 쉽게 개발할 수 있으면 좋겠다.
   

2. 그렇지만 최종 결과물은 성능과 기능, 사용자 경험 등에 있어서 네이티브 앱 언어로 만든 앱에 뒤떨어지지 않았으면 좋겠다.

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

이태상

자바와 웹 전문가로서 교육과 컨설팅을 주로 했었으며, 오랜 기간 전자금융 업무를 담당했다. 현재 한 금융기관의 재무회계시스템 구축 프로젝트에 참여하고 있다. 에이콘출판사에서 출간한 『톰캣 최종분석』(2005)부터 『리액트 웹앱 제작 총론』(2017)까지 다수의 IT 서적을 번역했다.