리액트 네이티브를 다루는 기술: 2.8.1 UI 준비하기 - 4

더북(TheBook)

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

더북(TheBook)

Home 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 정리 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 책의 연장선

화면에 다음과 같이 UI가 잘 나타났나요?

▲ 그림 2-16 카운터 UI 완성

추천 도서와 신규 콘텐츠를 먼저 받아보세요

엄선한 추천 도서와 신규 콘텐츠를 이메일로 보내드립니다.
새로운 책이 등록될 때마다 소식을 받아보세요.

리액트 네이티브를 다루는 기술(이하 '책')의 저작권은 김민준에게 있습니다.
책의 출판권 및 배타적발행권과 전자책의 배타적전송권은 (주)도서출판 길벗에 있습니다.
책의 내용을 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다.
- 링크 및 SNS 공유는 허용합니다.
책의 내용을 변경할 수 없습니다.
책의 내용을 상업적으로 사용할 수 없습니다.
책의 내용을 어떠한 형태로든 재배포할 수 없습니다.

TheBook by Gilbut | 오류 신고 및 문의

| 서비스 약관 | 개인정보취급방침