리액트 네이티브 인 액션

실무 중심 예제로 배우는 크로스 플랫폼 앱 개발 실전 활용서

네이더 다빗 지음 | 구멍가게 코딩단 옮김

프리렉 2021년 06월 07일 출간 종이책 : 2019년 09월 23일 출간

작품소개

책소개

흐름을 꿰뚫는 실무 중심 예제 주제별로 연결되어 단계별 학습에 최적화

리액트 네이티브는 모바일과 웹 개발자들에게 이 프레임워크가 가진 이점으로 효율성과 생산성을 빠르게 높일 수 있는 힘을 부여합니다. 우리가 만든 앱을 iOS와 Android 그리고 웹에 쉽게 배포합니다. 리액트 네이티브 앱을 플랫폼별 코드로 컴파일하여 개발 시간과 노력, 비용을 줄일 수 있습니다! 또한, 자바스크립트와 리액트 프레임워크를 사용하므로 관련 툴과 전문성, 거대한 생태계로부터 많은 이점을 누릴 수 있습니다.

<< 리액트 네이티브 인 액션 >>은 고품질의 크로스플랫폼 모바일과 웹 앱을 가장 빠르고 원할하게 만들 방법을 알려줍니다. 이 안내서로 독자분들은 명확하고 쉬운 도움을 받아 완전한 앱을 만들 수 있습니다. 독자분들은 스타일링, API, 애니메이션, 데이터 아키텍처 등의 기술을 쌓아가면서 더 발전된 주제들을 파고들 수 있습니다. 또한 기본 플랫폼의 모양과 느낌을 그대로 유지하면서 코드 재사용을 극대화하는 방법을 배우게 될 것입니다.

목차

Part 01 리액트 네이티브로 시작하기
Chapter 01 리액트 네이티브로 시작하기
_1.1 리액트와 리액트 네이티브 소개
___1.1.1 리액트의기본클래스
___1.1.2 리액트생명주기
_1.2 앞으로 배울 내용
_1.3 알아야 할 내용
_1.4 리액트 네이티브의 작동 방식 이해하기
___1.4.1 JSX
___1.4.2 스레드처리
___1.4.3 리액트
___1.4.4 단방향데이터흐름
___1.4.5 디핑(코드비교)
___1.4.6 컴포넌트로생각하기
_1.5 리액트 네이티브의 강점
___1.5.1 개발자가용성
___1.5.2 개발자생산성
___1.5.3 성능
___1.5.4 단방향 데이터 흐름
___1.5.5 개발자 경험
___1.5.6 트랜스파일링
___1.5.7 생산성과 효율성
___1.5.8 커뮤니티
___1.5.9 오픈 소스
___1.5.10 빈번한 업데이트
___1.5.11 크로스 플랫폼 모바일 앱을 만드는 대안
_1.6 리액트 네이티브의 약점
_1.7 기본 컴포넌트 만들어 사용하기
___1.7.1 컴포넌트 개요
___1.7.2 네이티브 컴포넌트
___1.7.3 컴포넌트 구성
___1.7.4 외부로export 가능한 컴포넌트
___1.7.5 컴포넌트 조립하기
_1.8 시작 프로젝트 만들기
___1.8.1 Create React Native App CLI
___1.8.2 React Native CLI
_정리

Chapter 02 리액트 이해하기
_2.1 state를 사용해 컴포넌트 데이터 다루기
___2.1.1 컴포넌트의 상태 제대로 조작하기
_2.2 props를 사용해 컴포넌트 데이터 다루기
_2.3 리액트 컴포넌트 스펙
___2.3.1 render 메서드로UI 만들기
___2.3.2 속성 초기화와 생성자 사용하기
_2.4 리액트 생명주기 메서드
___2.4.1 static getDerivedStateFromProps 메서드
___2.4.2 componentDidMount 생명주기 메서드
___2.4.3 shouldComponentUpdate 생명주기 메서드
___2.4.4 componentDidUpdate 생명주기 메서드
___2.4.5 componentWillUnmount 생명주기 메서드
_정리

Chapter 03 처음 만드는 리액트 네이티브 앱
_3.1 todo 앱 레이아웃 작성하기
_3.2 todo 앱 코드 작성하기
_3.3 개발자 메뉴 열기
___3.3.1 iOS 시뮬레이터에서 개발자 메뉴 열기
___3.3.2 안드로이드 에뮬레이터에서 개발자 메뉴 열기
___3.3.3 개발자 메뉴 사용하기
_3.4 계속해서 todo 앱 만들기
_정리

Part 02 리액트 네이티브로 앱 개발하기
Chapter 04 스타일링 소개
_4.1 리액트 네이티브에서 스타일 적용하고 관리하기
___4.1.1 앱에서 스타일 적용하기
___4.1.2 스타일 구성하기
___4.1.3 스타일과 코드
_4.2 View 컴포넌트에 스타일 적용하기
___4.2.1 배경색 설정하기
___4.2.2 border 속성 지정하기
___4.2.3 마진(margin)과 패딩(padding) 지정하기
___4.2.4 position을 이용해서 컴포넌트 배치하기
___4.2.5 프로필 카드의 위치 지정하기
_4.3 Text 컴포넌트에 스타일 적용하기
___4.3.1 Text 컴포넌트vs View 컴포넌트
___4.3.2 폰트 스타일
___4.3.3 텍스트 장식하기
_정리

Chapter 05 고급 스타일링 기법
_5.1 플랫폼별 크기와 스타일
___5.1.1 픽셀, 포인트,DP(DPs)
___5.1.2 shadowPropTypesIOS와elevation 속성으로 음영 넣기
___5.1.3 프로필 카드 예제에 음영 넣기
_5.2 컴포넌트를 이동, 회전, 크기 변경, 기울이기
___5.2.1 3D 효과를 내기 위한perspective 속성
___5.2.2 translateX와translateY 속성으로 이동하기
___5.2.3 rotateX,rotateY,rotateZ 속성으로 엘리먼트 회전하기
___5.2.4 90도 이상 회전할 때visibility 속성 지정하기
___5.2.5 scale,scaleX,scaleY 속성으로 화면에서 크기 변경하기
___5.2.6 scale을 이용해 프로필 카드 섬네일 만들기
___5.2.7 skewX와skewY 속성을 이용해X 축과Y축을 따라 기울이기
___5.2.8 변형 효과의 핵심 포인트
_5.3 flexbox를 이용해서 컴포넌트 배치하기
___5.2.1 flex 속성으로 컴포넌트의 면적 변경하기
___5.2.2 flexDirection 속성으로flex 진행 방향 지정하기
___5.3.3 justifyContent 속성으로 컴포넌트 주위 여백 정하기
___5.3.4 alignItems 속성으로 하위 요소들 정렬하기
___5.3.5 alignSelf 속성으로 부모에 지정된 정렬 기준 재정의하기
___5.3.6 flexWrap 속성으로 잘려나가지 않도록 하기
_정리

Chapter 06 내비게이션
_6.1 리액트 네이티브 내비게이션과 웹 내비게이션의 비교
_6.2 내비게이션이 구현된 앱 만들기
_6.3 데이터 유지하기
_6.4 DrawerNavigator를 이용해서 드로어 내비게이션 만들기
_정리

Chapter 07 애니메이션
_7.1 Animated API 소개
_7.2 입력창에 포커스 애니메이션 적용하기
_7.3 애니메이션을 연결해 사용자 정의 애니메이션 만들기
_7.4 병렬처리되는 애니메이션 만들기
_7.5 순차적으로 처리되는 애니메이션 만들기
_7.6 Animated.stagger 함수를 이용해서 간격 주기
_7.7 Animated API 라이브러리 이용 시 유용한 팁
___7.7.1 애니메이션 효과 재

출판사 서평

흐름의 꿰뚫는 실무 중심 예제로 배우는 크로스 플랫폼
이 책은 가능한 한 빠르고 수월하게 리액트 네이티브를 배워 활용할 수 있도록 하였습니다. 이 책에서 가장 두드러지는 실무 중심 예제는 다양한 관점에서 참고해볼 만한 개발 노하우와 연습용이 아닌 실전에서 활용할 수 있도록 초점을 두었습니다. 또한 단계별 과정에서 이전 과정과 이후의 과정이 자연스레 연결되어 흐름이 끊어지지 않고 새로 나오는 개념과 연결 또한 자연스럽습니다. 천천히 자기만의 속도로 공부한다면 많은 지식과 노하우를 얻을 수 있을 것입니다.

리액트 네이티브에 대한 현실적인 안내서
리액트 네이티브가 무엇인지, 어떻게 동작하는지 리액트와의 관계를 살펴보고 리액트 네이티브를 어떤 상황에서 적절히 사용해야 하는지를 다룹니다. 그리고 기본 개념, 작동 방식, 컴포넌트 스펙과 생명주기 등을 배우고 바로 네이티브 앱을 만들어 보면서 iOS와 안드로이드 개발자 메뉴와 디버그 하는 방법을 배웁니다. 본격적으로 리액트 네이티브로 앱을 개발해보며 기능을 추가합니다. 스타일, 내비게이션, 애니메이션, Context API를 이용하는 방법, 데이터 아키텍처를 이용한 데이터 처리 방법은 리덕스에 초점을 맞춰서 다루고 크로스 플랫폼과 플랫폼별 API를 배웁니다. 마지막으로 컴포넌트와 내비게이션 UI에 스타일을 적용하고 Fetch API를 이용해서 외부 네트워크의 리소스로부터 데이터를 가져오는 작업을 해봅니다. 그렇게 앞서 배운 모든 기능을 한데 모아 스타워즈 캐릭터를 볼 수 있는 앱을 만들어 보도록 합니다.

작가정보

저자(글) 네이더 다빗

저자 : 네이더 다빗
AWS Mobile의 개발자이며 주창자로, 개발자들이 기존 기술을 이용하여 풀스택 웹과 모바일 애플리케이션을 구축할 수 있도록 도구와 서비스를 연구하고 있습니다. React Native Training의 창시자이며 React Native Radio 팟캐스트의 진행자이기도 합니다.

역자 : 구멍가게 코딩단
프로그래밍을 좋아하지만, 남들 앞에 나설 용기 없는 10년 차 이상 개발자, 현업 관리자, 강사들의 비공개 모임. 어린 시절 구멍가게 앞 아저씨들이 인생의 진리를 가볍게 던졌던 것처럼 프로그래밍의 오의(奧義)를 가볍게 던지고 싶은 사람들의 모임. http://cafe.naver.com/gugucoding을 통해서 독자들과 소통하고 있다.

번역 구멍가게 코딩단