자료검색

3가지 앱을 만들면서 배우는 리액트 네이티브 개발

리액트 네이티브는 메타에 의해 공개된 오픈소스 프로젝트로 사용자 인터페이스를 만드는 리액트를 기반으로 제작되었다. 리액트 네이티브를 사용하면 자바스크립트를 통해 한 번에 애플의 iOS 환경과 구글의 안드로이드 환경에서 모두 작동하는 네이티브 모바일 앱을 만들 수 있다.

이 책은 바로 프로젝트를 시작하면서 리액트 네이티브를 학습할 수 있도록 구성되어 있다. 계산기, ToDo리스트, 여행 사진 공유 앱 만들기 등 3가지 프로젝트를 진행하면서 필요한 리액트 네이티브 기초 내용을 익히고, 다양한 라이브러리를 사용해보며 크로스 플랫폼(iOS/안드로이드) 모바일 앱 개발 역량을 키운다.

처음부터 프로젝트를 시작하며 익히는 리액트 네이티브

이 책은 바로 프로젝트를 시작하면서 리액트 네이티브를 학습합니다. 프로젝트를 진행하면서 만들고 싶은 모습이나 기능 구현을 위해 필요한 것이 생긴다면 그에 대한 내용을 공부하는 방법으로 리액트 네이티브의 기초/핵심 요소와 관련 기술 활용법을 익힙니다.

★ 대상 독자 & 선수 지식

리액트 네이티브를 처음 접하는 입문자를 대상으로 합니다. 자바스크립트를 다뤄본 경험이 있다면 이 책을 보는 데 수월할 것입니다. 리액트 네이티브를 다루면서 필요한 경우 리액트 핵심 내용을 설명하고 있기 때문에 별도로 리액트에 대해 학습할 필요 없이 이 책의 학습 과정을 따라갈 수 있습니다.

★ 이 책의 구성

이 책은 세 가지 프로젝트를 진행하며 리액트 네이티브에서 모바일 앱을 개발하는 방법에 대해 알아봅니다.

 계산기 만들기
더하기와 빼기 기능만 있는 간단한 계산기를 만들어봅니다. 계산기를 만들어보며 컴포넌트와 스타일 그리고 상태를 생성하고 관리하는 방법에 대해 알아봅니다. 그리고 계산기 화면을 구현하고 기능을 추가해 프로젝트를 완성해봅니다.

 ToDo리스트 만들기
ToDo리스트 만들기 프로젝트를 통해 값을 입력받는 방법을 배우고 목록을 다루는 방법에 대해 배웁니다. 또한 로그인 화면을 만들어서 사용자 인증 과정을 경험해봅니다.

 여행 사진 공유 앱 만들기
서버를 활용해서 여러 사용자가 함께 사용할 수 있는 사진 공유 앱을 만들어봅니다. 이 과정에서 리액트 내비게이션의 네이티브 스택 내비게이터와 탭 내비게이터를 사용하고, Firebase를 사용해서 서버에 데이터를 저장하고 불러오는 방법에 대해 알아봅니다. 또한 다양한 라이브러리를 사용해보고 지도와 Google Places API를 사용해 위치를 검색하는 기능을 구현해봅니다.

★ 이 책을 통해 배우는 내용

 리액트 네이티브 사용에 필요한 리액트 지식: 컴포넌트, props와 state, Hooks, Context API
 리액트 네이티브 프로젝트에 반드시 필요한 내비게이션 기능 활용법: 리액트 스택 내비게이터, 탭 내비게이터
 Firebase 기본 사용법: Authentication, Storage, Firestore

★ 예제 소스
https://bit.ly/github-hands-on-rn

1장. 리액트 네이티브 시작하기
1.1 들어가기 전에
1.2 개발 환경 준비하기
1.3 리액트 네이티브 프로젝트 생성하기
1.4 JSX 문법 알아보기
1.5 Prettier와 ESLint
1.6 마치며

2장. 계산기 만들기 I
2.1 프로젝트 준비하기
2.2 컴포넌트와 스타일
2.3 Button 컴포넌트와 props
2.4 화면에 결과 출력하기
2.5 마치며

3장. 계산기 만들기 II
3.1 화면 분할과 정렬
3.2 StatusBar 컴포넌트로 상태 바 수정하기
3.3 버튼 배치하기
3.4 계산기 로직 만들기
3.5 마치며

4장. ToDo리스트 만들기 I
4.1 프로젝트 준비하기
4.2 로그인 화면 만들기
4.3 Image 컴포넌트로 이미지 넣기
4.4 TextInput 컴포넌트로 입력 칸 만들기
4.5 KeyboardAvoidingView 컴포넌트로 입력 화면 조절하기
4.6 Input 컴포넌트 입력 값 받기
4.7 Input 컴포넌트 꾸미기
4.8 useRef Hook으로 입력 칸 이동하기
4.9 로그인 버튼 만들기
4.10 마치며

5장. Todo리스트 만들기 II
5.1 리액트 내비게이션으로 화면 전환하기
5.2 화면 옵션 설정하기
5.3 화면 일부가 가려지는 문제 해결하기
5.4 로그인 여부에 따른 화면 관리하기
5.5 마치며

6장. ToDo리스트 만들기 III
6.1 목록 화면 만들기
6.2 추가 기능 만들기
6.3 데이터 저장하고 불러오기
6.4 삭제 기능 만들기
6.5 완료 기능 만들기
6.6 마치며

7장. 여행 사진 공유 앱 만들기 I
7.1 프로젝트 준비하기
7.2 앱 아이콘과 로딩 화면 변경하기
7.3 인증 화면 준비하기
7.4 화면 만들기
7.5 Assets 캐싱하기
7.6 마치며

8장. 여행 사진 공유 앱 만들기 II
8.1 Firebase 사용하기
8.2 탭 내비게이터 사용하기
8.3 홈 화면 만들기
8.4 프로필 화면 만들기
8.5 마치며

9장. 여행 사진 공유 앱 만들기 III
9.1 프로필 수정 기능 만들기
9.2 이미지 피커 만들기
9.3 Firebase Storage에 사진 업로드하기
9.4 마치며

10장. 여행 사진 공유 앱 만들기 Ⅳ
10.1 글 작성하기
10.2 Google Places API 사용하기
10.3 Firebase Firestore 사용하기
10.4 EventEmitter로 이벤트 발생시키기
10.5 내가 쓴 글 목록과 수정 및 삭제 기능 만들기
10.6 Map 화면 만들기
10.7 마치며