리액트 네이티브를 다루는 기술

실무에서 알아야 할 기술은 따로 있다!

김민준 지음

길벗 2021년 11월 30일 출간 종이책 : 2021년 10월 31일 출간

작품소개

책소개

입문부터 실무까지 한 권으로!
네이티브 코드 연동과 서드 파티 라이브러리로 생산성과 개발 효율을 높인다.

이 책의 목표는 리액트 네이티브의 기초 개념과 실제로 활용하는 데 필요한 지식을 쉽게 배우고, 궁극적으로 자신이 만들고 싶은 모바일 앱을 직접 개발할 수 있도록 돕는 것이다. 수월하게 학습할 수 있도록 필요한 기본 지식(리액트, 타입스크립트, 관련 라이브러리 등)을 수록하고, 단계별로 상세하게 실습하면서 기본기를 익힐 수 있도록 했다. 또한, 프로젝트 개발의 전반적인 내용을 파악하고 실무에 응용할 수 있도록 예제 프로젝트는 처음부터 끝까지 온전히 전체를 직접 만들어본다. To do list, 다이어리 앱, 사진 공유 앱, 게시판 프로젝트를 만들면서 리액트 네이티브의 핵심 기능은 물론, 리액트 네이티브로 프로젝트를 개발할 때 자신감을 더해줄 필수 지식들을 배울 수 있다.

목차

1장 리액트 네이티브 첫걸음
__1.1 리액트 네이티브란?
__1.2 작업 환경 준비하기
____1.2.1 Node.js와 npm 설치하기
____1.2.2 yarn
____1.2.3 Java Development Kit
____1.2.4 Watchman 설치하기
____1.2.5 안드로이드 스튜디오 설치하기
____1.2.6 안드로이드 환경 변수 설정하기
____1.2.7 VS Code 설치하기
____1.2.8 Xcode와 CocoaPods 설치하기
__1.3 새 리액트 네이티브 프로젝트 만들기
____1.3.1 안드로이드 환경에서 리액트 네이티브 앱 구동하기
____1.3.2 iOS 환경에서 리액트 네이티브 앱 구동하기
__1.4 프로젝트 살펴보기
____1.4.1 엔트리 파일
____1.4.2 App 컴포넌트
____1.4.3 네이티브 프로젝트
__1.5 ESLint와 Prettier
__1.6 정리

2장 컴포넌트
__2.1 나만의 컴포넌트 만들기
__2.2 Props
__2.3 defaultProps
__2.4 JSX 문법
____2.4.1 태그를 열면 반드시 닫아주기
____2.4.2 스스로 닫는 태그 사용하기
____2.4.3 반환할 땐 꼭 하나의 태그로 감싸기
____2.4.4 JSX 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기
____2.4.5 주석 작성하기
__2.5 StyleSheet로 컴포넌트에 스타일 입히기
____2.5.1 Props로 컴포넌트 스타일을 커스터마이징하기
__2.6 Props 객체 구조 분해 할당
__2.7 useState Hook으로 상태 관리하기
____2.7.1 useState 사용해보기
____2.7.2 Button 컴포넌트 사용하기
____2.7.3 조건부 렌더링 구현하기
__2.8 카운터 만들기
____2.8.1 UI 준비하기
____2.8.2 Counter 컴포넌트에 Props 설정하기
____2.8.3 App에서 상태 관리하기
__2.9 정리

3장 할 일 목록 만들기 I
__3.1 프로젝트 기반 다지기
____3.1.1 프로젝트 생성
____3.1.2 오늘 날짜를 알려주는 DateHead 컴포넌트 만들기
____3.1.3 StatusBar 색상 바꾸기
____3.1.4 레이아웃 준비하기
____3.1.5 이미지 사용하기
__3.2 TextInput으로 사용자 키보드 입력받기
____3.2.1 KeyboardAvoidingView로 키보드가 화면을 가리지 않게 하기
____3.2.2 useState로 텍스트 상태 값 관리하기
____3.2.2 커스텀 버튼 만들기
____3.2.3 TextInput에 onSubmitEditing 및 returnKeyType 설정하기
__3.3 정리

4장 할 일 목록 만들기 II
__4.1 불변성을 지키면서 객체와 배열을 업데이트하는 방법
____4.1.1 불변성을 지켜야 하는 이유
____4.1.2 배열의 불변성을 지키는 방법
__4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기
____4.2.1 todos 상태 만들기
____4.2.2 TodoList 컴포넌트 만들기
____4.2.3 TodoItem 컴포넌트 만들기
____4.2.4 항목 사이에 구분선 보여주기
____4.2.5 완료한 항목에 다른 스타일 적용하기
__4.3 새 항목 등록하기
__4.4 할 일 완료 상태 토글하기
__4.5 항목 삭제하기
____4.5.1 벡터 아이콘 사용하기
____4.5.2 항목 삭제 함수 만들기
____4.5.3 항목을 삭제하기 전에 한번 물어보기
__4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기
____4.6.1 Promise가 무엇인가요?
____4.6.2 AsyncStorage 설치하기
____4.6.3 AsyncStorage의 기본 사용법
____4.6.4 AsyncStorage 적용하기
__4.7 정리

5장 리액트 내비게이션으로 여러 화면 관리하

출판사 서평

리액트 네이티브, 현장 밀착 입문서는 따로 있다!

자바스크립트, 리액트, 타입스크립트를 사용한다
자바스크립트는 필수! 기본 문법을 알고 있다고 가정한다. 리액트를 안다면 수월하지만, 몰라도 학습할 수 있도록 주요 문법과 API를 다룬다. 타입스크립트 역시 기초를 먼저 다루고 프로젝트에 적용해 본다.

네이티브 코드 연동을 쉽게 배울 수 있도록 상세히 설명한다
모든 기능을 자바스크립트만으로 작성할 수는 없으므로 네이티브 코드를 연동하는 방법은 반드시 알아둬야 한다. 필요에 따라 네이티브 코드로 작성한 API를 실행하고, 네이티브 코드로 작성한 UI를 연동하는 방법을 알아보자.

서드 파티 라이브러리로 프로젝트의 생산성과 개발 효율을 높인다
상황에 따라 서드 파티 라이브러리를 잘 활용하면 성공적인 프로젝트를 만들 수 있다. 리덕스, 리코일, React-query, Firebase 등 개발할 때 유용한 라이브러리들을 알아보자. 또한, Strapi를 사용하여 REST API를 연동하고, REST API를 빠르게 구축해 본다.

ㆍ 이 책은 자바스크립트의 기본 지식을 갖춘 독자를 대상으로 합니다. 아직 자바스크립트를 잘 알지 못한다면 다음 링크에서 자바스크립트 기본 문법을 먼저 학습하세요. 리액트와 타입스크립트는 다뤄본 적이 없어도 학습할 수 있도록 설명했습니다.
_https://ko.javascript.info/
ㆍ 책의 후반부에서는 직접 작성한 네이티브 코드가 리액트 네이티브 프로젝트에 어떻게 연동되는지 알아봅니다. 안드로이드의 경우 자바와 코틀린을, iOS의 경우 Objective-C와 스위프트를 다루는데, 네이티브 모바일 앱을 개발해본 적이 없어도 문제없이 실습할 수 있도록 설명했습니다.
ㆍ 이 책은 리액트 네이티브 0.64 버전을 기준으로 합니다. 라이브러리 버전 업데이트에 따른 변경사항은 다음 링크에서 공지할 예정입니다.
_https://bit.ly/gilbut-react-native-notice

작가정보

저자(글) 김민준

저자 : 김민준
VELOPERT
개발은 언제나 즐겁고 재밌어야 한다는 생각을 갖고 있는 개발자이며, IT 기술을 가르치는 것을 굉장히 좋아하는 교육자이다. 또한, 사용자를 행복하게 만드는 서비스를 만드는 것이 가장 중요하다고 여긴다. 현재 리디(주)에서 애니메이션 스트리밍 서비스 라프텔(laftel.net)의 프런트엔드 개발을 하고 있다. 그리고 개발자들의 블로그 서비스인 벨로그(velog.io)를 운영 및 개발하고 있다.

블로그: https://velog.io/@velopert
GitHub: https://github.com/velopert
Twitter: https://twitter.com/velopert