리액트 네이티브를 다루는 기술
입문부터 실무까지 한 권으로!
네이티브 코드 연동과 서드 파티 라이브러리로 생산성과 개발 효율을 높인다.
이 책의 목표는 리액트 네이티브의 기초 개념과 실제로 활용하는 데 필요한 지식을 쉽게 배우고, 궁극적으로 자신이 만들고 싶은 모바일 앱을 직접 개발할 수 있도록 돕는 것이다. 수월하게 학습할 수 있도록 필요한 기본 지식(리액트, 타입스크립트, 관련 라이브러리 등)을 수록하고, 단계별로 상세하게 실습하면서 기본기를 익힐 수 있도록 했다. 또한, 프로젝트 개발의 전반적인 내용을 파악하고 실무에 응용할 수 있도록 예제 프로젝트는 처음부터 끝까지 온전히 전체를 직접 만들어본다. To do list, 다이어리 앱, 사진 공유 앱, 게시판 프로젝트를 만들면서 리액트 네이티브의 핵심 기능은 물론, 리액트 네이티브로 프로젝트를 개발할 때 자신감을 더해줄 필수 지식들을 배울 수 있다.
«리액트 네이티브를 다루는 기술»은 1~9, 14~17장을 공개합니다.
전자책 구입
목차
- 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 Hook의 규칙
- 2.7.3 Button 컴포넌트 사용하기
- 2.7.4 조건부 렌더링 구현하기
- 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.3 커스텀 버튼 만들기
- 3.2.4 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장 리액트 내비게이션으로 여러 화면 관리하기
- 5.1 설치 및 적용하기
- 5.1.1 의존 패키지 설치하기
- 5.1.2 라이브러리 적용하기
- 5.2 기본적인 사용법
- 5.2.1 네이티브 스택 내비게이터
- 5.2.2 스크린 이동하기
- 5.2.3 라우트 파라미터
- 5.2.4 뒤로가기
- 5.2.5 헤더 커스터마이징하기
- 5.3 다양한 내비게이터
- 5.3.1 드로어 내비게이터
- 5.3.2 하단 탭 내비게이터
- 5.3.3 머티리얼 상단 탭 내비게이터
- 5.3.4 머티리얼 하단 탭 내비게이터
- 5.3.5 머티리얼 하단 탭 내비게이터 헤더 타이틀 동기화하기
- 5.4 내비게이션 Hooks
- 5.4.1 useNavigation
- 5.4.2 useRoute
- 5.4.3 useFocusEffect
- 5.5 정리
- 6장 다이어리 앱 만들기 I
- 6.1 프로젝트 준비하기
- 6.1.1 react-native-vector-icons 적용하기
- 6.1.2 react-navigation 적용하기
- 6.2 Context API 사용하기
- 6.2.1 children Props
- 6.2.2 useContext Hook 함수
- 6.2.3 Context에서 유동적인 값 다루기
- 6.3 새 글 작성하기
- 6.3.1 FloatingWriteButton 만들기
- 6.3.2 WriteScreen UI 준비하기
- 6.3.3 useRef로 컴포넌트 레퍼런스 선택하기
- 6.3.4 KeyboardAvoidingView로 화면 감싸기
- 6.3.5 WriteScreen에서 텍스트 상태 관리하기
- 6.3.6 LogContext로 배열 상태 관리하기
- 6.3.7 Log 작성 기능 마무리하기
- 6.4 글 목록 보여주기
- 6.4.1 FeedListItem 컴포넌트 만들기
- 6.4.2 FeedList 컴포넌트 만들기
- 6.4.3 date-fns로 날짜 포맷팅하기
- 6.5 Animated로 애니메이션 적용하기
- 6.5.1 애니메이션 연습하기
- 6.5.2 스크롤을 내렸을때 글쓰기 버튼 숨기기
- 6.5.3 spring 사용하기
- 6.5.4 예외 처리하기
- 6.6 정리
- 7장 다이어리 앱 만들기 II
- 7.1 작성한 글을 WriteScreen으로 열기
- 7.1.1 FeedListItem 수정하기
- 7.1.2 WriteScreen에서 log 파라미터 인식하기
- 7.2 수정 기능 구현하기
- 7.2.1 LogContext에 onModify 함수 구현하기
- 7.2.2 WriteScreen에서 onModify 함수 사용하기
- 7.3 삭제 기능 구현하기
- 7.3.1 LogContext에 onRemove 함수 구현하기
- 7.3.2 WriteScreen에서 onRemove 함수 사용하기
- 7.3.3 WriteHeader 수정하기
- 7.4 검색 기능 구현하기
- 7.4.1 SearchHeader 컴포넌트 만들기
- 7.4.2 화면 크기 조회하기
- 7.4.3 SearchHeader 컴포넌트 UI 구성하기
- 7.4.4 SearchContext 만들기
- 7.4.5 검색어 필터링 후 FeedList 재사용하기
- 7.4.6 EmptySearchResult 만들기
- 7.5 달력 기능 구현하기
- 7.5.1 달력에 표시하기
- 7.5.2 데이터를 달력과 연동하기
- 7.5.3 달력 하단에 로그 목록 보여주기
- 7.5.4 useMemo Hook으로 최적화하기
- 7.6 날짜 및 시간 수정 기능 구현하기
- 7.6.1 WriteHeader에서 날짜 및 시간 보여주기
- 7.6.2 DateTimePickerModal 컴포넌트 사용하기
- 7.7 useReducer Hook 함수 사용하기
- 7.8 AsyncStorage로 데이터 유지하기
- 7.9 정리
- 8장 Firebase로 사진 공유 앱 만들기 I
- 8.1 프로젝트 준비하기
- 8.1.1 내비게이션과 아이콘 설정하기
- 8.1.2 Firebase 적용하기
- 8.1.3 화면 구성 이해하기
- 8.2 회원 인증 기능 구현하기
- 8.2.1 회원 인증을 위한 UI 준비하기
- 8.2.2 인풋 상태 관리하기
- 8.2.3 인풋에서 키보드 리턴 처리하기
- 8.2.4 컴포넌트 분리하기
- 8.2.5 Firebase로 회원 인증하기
- 8.2.6 오류 예외 처리하기
- 8.2.7 사용자 프로필 Firestore에 담기
- 8.3 Firebase에 회원 정보 등록하기
- 8.4 UserContext 만들고 로그인 사용자 분기 처리하기
- 8.5 이미지 업로드하기
- 8.5.1 이미지 선택 기능 구현하기
- 8.5.2 사용자 기본 이미지 설정하기
- 8.5.3 Firebase Storage로 이미지 업로드하기
- 8.6 정리
- 9장 Firebase로 사진 공유 앱 만들기 II
- 9.1 탭 화면 구현하기
- 9.2 로그인 상태 유지하기
- 9.3 포스트 작성 기능 구현하기
- 9.3.1 탭 중앙에 버튼 만들기
- 9.3.2 업로드할 사진 선택 또는 카메라 촬영하기
- 9.3.3 포스트 작성 화면 만들기
- 9.3.4 Firestore에 포스트 등록하기
- 9.4 포스트 목록 조회하기
- 9.4.1 PostCard 컴포넌트 만들기
- 9.4.2 Firestore로 포스트 목록 조회하기
- 9.4.3 FeedScreen에서 getPost 호출 후 FlatList로 보여주기
- 9.4.4 페이지네이션 및 시간순 정렬하기
- 9.5 사용자 프로필 화면 구현하기
- 9.5.1 Firestore 데이터 조회할 때 조건 추가하기
- 9.5.2 포스트 조회 함수 리팩토링하기
- 9.5.3 Firestore에서 색인 추가하기
- 9.5.4 Profile 컴포넌트 만들기
- 9.5.5 그리드 뷰 만들기
- 9.5.6 페이지네이션 구현하기
- 9.5.7 커스텀 Hook을 작성해 컴포넌트 리팩토링하기
- 9.5.8 포스트 열기
- 9.5.9 내 프로필 화면 구현하기
- 9.6 포스트 수정 및 삭제 기능 구현하기
- 9.6.1 재사용할 수 있는 모달 만들기
- 9.6.2 사용자에게 수정 및 삭제 물어보기
- 9.6.3 포스트 삭제 기능 구현하기
- 9.6.4 포스트 설명 수정 기능 구현하기
- 9.7 EventEmitter로 다른 화면 간 흐름 제어하기
- 9.7.1 EventEmitter3 설치 및 적용하기
- 9.7.2 포스트 작성 후 업데이트하기
- 9.7.3 포스트 삭제 후 목록에서 제거하기
- 9.7.4 리팩토링하기
- 9.7.5 포스트 수정 후 업데이트하기
- 9.8 설정 화면 만들기
- 9.9 Firestore 보안 설정하기
- 9.10 Splash 화면 만들기
- 9.11 정리
- 10장 네이티브 모듈 만들기
- 10.1 안드로이드에서 Toast 사용하기
- 10.1.1 모듈 작성하기
- 10.1.2 메서드 작성하기
- 10.1.3 상수 내보내기
- 10.1.4 패키지 작성하기
- 10.1.5 패키지 등록하기
- 10.1.6 자바스크립트에서 네이티브 모듈 사용하기
- 10.2 iOS에서 Alert 띄우기
- 10.2.1 모듈 작성하기
- 10.2.2 메서드 작성하기
- 10.2.3 상수 내보내기
- 10.2.4 자바스크립트에서 네이티브 모듈 사용하기
- 10.3 코틀린으로 네이티브 모듈 만들어보기
- 10.3.1 프로젝트에 코틀린 적용하기
- 10.3.2 모듈 작성하기
- 10.3.3 패키지 작성하기
- 10.3.4 패키지 등록하기
- 10.3.5 메서드 구현하기
- 10.3.6 자바스크립트에서 네이티브 모듈 사용하기
- 10.4 스위프트로 네이티브 모듈 작성하기
- 10.4.1 모듈을 프로젝트에 등록하기
- 10.4.2 메서드 작성하기
- 10.4.3 메서드 구현하기
- 10.4.4 상수 내보내기
- 10.4.5 자바스크립트에서 네이티브 모듈 사용하기
- 10.5 정리
- 11장 네이티브 UI 컴포넌트 사용하기
- 11.1 안드로이드 카운터 만들기
- 11.1.1 레이아웃 만들기
- 11.1.2 레이아웃에 TextView와 Button 추가하기
- 11.1.3 View 클래스 만들기
- 11.1.4 Manager 클래스 만들기
- 11.1.5 패키지 작성 및 등록하기
- 11.1.6 네이티브 컴포넌트 불러와서 사용하기
- 11.1.7 View 결합 기능 사용하기
- 11.1.8 컴포넌트에 Props 연동하기
- 11.1.9 이벤트 설정하기
- 11.2 iOS 카운터 만들기
- 11.2.1 View 클래스 만들기
- 11.2.2 Manager 클래스 만들기
- 11.2.3 텍스트와 버튼 보여주기
- 11.2.4 Props 연동하기
- 11.2.5 이벤트 설정하기
- 11.3 정리
- 12장 리액트 네이티브 프로젝트에서 타입스크립트 사용하기
- 12.1 타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기
- 12.2 타입스크립트 빠르게 배우기
- 12.2.1 기본 타입
- 12.2.2 함수 타입
- 12.2.3 interface
- 12.2.4 배열 타입
- 12.2.5 Type Alias
- 12.2.6 Generic
- 12.2.7 더 알아보기
- 12.3 타입스크립트로 컴포넌트 작성하기
- 12.3.1 Props 사용하기
- 12.3.2 useState 사용하기
- 12.3.3 useRef 사용하기
- 12.3.4 useReducer 사용하기
- 12.4 타입스크립트로 Context API 사용하기
- 12.5 타입스크립트로 react-navigations 사용하기
- 12.5.1 라이브러리 설치하기
- 12.5.2 네이티브 스택 내비게이션 사용하기
- 12.5.3 내비게이션 감싸기
- 12.6 서드 파티 라이브러리의 타입
- 12.7 정리
- 13장 라이브러리를 사용한 상태 관리
- 13.1 리덕스 사용법 훑어보기
- 13.1.1 모듈 작성하기
- 13.1.2 루트 리듀서 만들기
- 13.1.3 스토어 만들기
- 13.1.4 Provider로 리액트 프로젝트에 리덕스 적용하기
- 13.1.5 useSelector와 useDispatch로 컴포넌트에서 리덕스 연동하기
- 13.2 Redux Toolkit 알아보기
- 13.2.1 액션 생성 함수와 리듀서
- 13.2.2 slice의 이름과 액션 타입
- 13.2.3 액션의 payload
- 13.2.4 자동으로 이루어지는 불변성 관리
- 13.2.5 타입스크립트와 함께 사용하기
- 13.3 리덕스로 사용자 인증 기능 구현하기
- 13.3.1 라이브러리 설치하기
- 13.3.2 auth 모듈 작성하기
- 13.3.3 루트 리듀서와 스토어를 만들고 프로젝트에 적용하기
- 13.3.4 AuthApp 틀 잡아주기
- 13.3.5 AuthApp 리덕스와 연동하기
- 13.3.6 useSelector의 DefaultRootState 지정하기
- 13.3.7 리덕스와 연동하는 로직을 Hook으로 분리하기
- 13.4 리덕스로 항목 추가하기, 읽기, 업데이트하기, 삭제하기 구현하기
- 13.4.1 todos 모듈 작성하기
- 13.4.2 TodoApp 틀 잡아주기
- 13.4.3 TodoApp 리덕스와 연동하기
- 13.5 리덕스 미들웨어를 사용하여 REST API 요청 상태 관리하기
- 13.5.1 미들웨어 적용하기
- 13.5.2 API 요청 함수 준비하기
- 13.5.3 posts 모듈 만들기
- 13.5.4 PostsApp 틀 잡아주기
- 13.5.5 PostsApp 리덕스와 연동하기
- 13.6 리덕스 정리
- 13.7 리코일 살펴보기
- 13.7.1 atom
- 13.7.2 RecoilRoot
- 13.7.3 selector
- 13.7.4 라이브러리 설치하기
- 13.8 리코일로 AuthApp 구현하기
- 13.9 리코일로 TodoApp 구현하기
- 13.9.1 useRecoilCallback을 사용하여 최적화하기
- 13.10 리코일로 PostsApp 구현하기
- 13.11 리코일 정리
- 13.12 리덕스와 리코일
- 14장 Strapi로 REST API 서버 빠르게 구축하기
- 14.1 Strapi 살펴보기
- 14.1.1 strapi 프로젝트 생성하기
- 14.2 새 콘텐트 타입 만들기
- 14.3 일부 필드를 Private로 변경하기
- 14.4 데이터 권한 설정하기
- 14.5 Content API에 커스터마이징하기
- 14.5.1 게시글 작성하기
- 14.5.2 게시글 수정하기
- 14.5.3 게시글 삭제하기
- 14.6 Postman 설치하기
- 14.7 회원가입 및 로그인 API 사용하기
- 14.8 Article API 사용하기
- 14.9 Comment API 수정하기
- 14.9.1 댓글 작성하기
- 14.9.2 댓글 조회하기
- 14.9.3 댓글 수정하기
- 14.9.4 댓글 삭제하기
- 14.10 댓글 API 사용하기
- 14.11 정리
- 15장 리액트 쿼리를 사용한 API 상태 관리
- 15.1 프로젝트 생성 및 초기 설정하기
- 15.1.1 react-native-vector-icons 적용하기
- 15.1.2 리액트 내비게이션 적용하기
- 15.2 useQuery를 사용하여 데이터 조회하기
- 15.2.1 반환값
- 15.2.2 배열 타입의 캐시 키
- 15.2.3 useQuery의 options
- 15.2.4 staleTime과 cacheTime
- 15.3 API 요청할 준비하기
- 15.3.1 타입 선언하기
- 15.3.2 axios 인스턴스만들기
- 15.3.3 QueryClientProvider 사용하기
- 15.4 게시글 목록 조회 기능 구현하기
- 15.4.1 API 함수 작성하기
- 15.4.2 useQuery 사용하기
- 15.4.3 컴포넌트 만들기
- 15.5 게시글 조회 기능 구현하기
- 15.5.1 화면 준비하기
- 15.5.2 API 함수 작성하기
- 15.5.3 useQuery 사용하기
- 15.5.4 컴포넌트 만들기
- 15.6 회원 인증 기능 준비하기
- 15.6.1 화면 준비하기
- 15.6.2 사용자 메뉴 화면 만들기
- 15.6.3 회원 인증 API 함수 만들기
- 15.6.4 AuthForm 컴포넌트 만들기
- 15.7 useMutation로 조회 외 작업 처리하기
- 15.7.1 반환값
- 15.8 회원 인증 기능 구현하기
- 15.8.1 커스텀 Hook 만들기
- 15.8.2 사용자 인증 상태 관리하기
- 15.8.3 인증 토큰 설정하기
- 15.8.4 로그아웃 기능 구현하기
- 15.8.5 AsyncStorage로 인증 상태 유지하기
- 15.8.6 로그인/회원가입 오류 처리하기
- 15.9 게시글 작성 기능 구현하기
- 15.9.1 게시글 작성 버튼 준비하기
- 15.9.2 게시글 작성 화면 만들기
- 15.9.3 게시글 작성 API 함수 만들기
- 15.9.4 게시글 작성 버튼 만들기
- 15.9.5 useMutation으로 게시글 작성 API 호출하기
- 15.9.6 QueryClient로 데이터 새로고침하기
- 15.9.7 QueryClient로 캐시 데이터 직접 수정하기
- 15.10 게시글 페이지네이션 기능 구현하기
- 15.10.1 게시글 목록 조회 API 함수 변경하기
- 15.10.2 useInfiniteQuery 사용하기
- 15.10.3 게시글 작성 후 처리 로직 변경하기
- 15.10.4 화면을 아래로 당겨서 새로고침하기
- 15.11 게시글 수정/삭제 기능 구현하기
- 15.11.1 수정 기능 구현하기
- 15.11.2 삭제 기능 구현하기
- 15.12 댓글 작성/수정/삭제 기능 구현하기
- 15.12.1 API 함수 준비하기
- 15.12.2 댓글 작성 컴포넌트 만들기
- 15.12.3 댓글 삭제 기능 구현하기
- 15.12.4 댓글 수정 기능 구현하기
- 15.13 정리
- 16장 앱 스토어와 구글 플레이에 리액트 네이티브 앱 등록하기
- 16.1 프로젝트 준비하기
- 16.2 안드로이드 앱 등록하기
- 16.2.1 앱 서명하기
- 16.2.2 AAB 파일 생성하기
- 16.2.3 릴리스 빌드 실행해보기
- 16.2.4 구글 플레이에 앱 등록하기
- 16.3 iOS 앱 등록하기
- 16.3.1 App Transport Security 활성화하기
- 16.3.2 Build Configuration 변경하기
- 16.3.3 앱 빌드하기
- 16.3.4 애플 개발자 계정 생성하기
- 16.3.5 실제 디바이스에서 앱 실행하기
- 16.3.6 애플 개발자 프로그램 가입하기
- 16.3.7 인증서 발급받기
- 16.3.8 디바이스 추가하기
- 16.3.9 아이콘 설정하기
- 16.3.10 앱 빌드 후 앱 스토어에 업로드하기
- 16.4 정리
- 17장 마치면서
- 17.1 커뮤니티
- 17.2 책의 연장선