React native Master Class-Nomadecorders #3.0~3.11

오늘의 강의: React Native 마스터클래스: From #3.0 to #3.11
오늘의 과제: 위의 강의를 시청하신 후, 아래 코드 챌린지를 제출하면 됩니다.
제출기간: 2일 챌린지! 48시간. 금요일 오전 6시까지 ! 야호

 

---

#3.0 TMDB 

- 어플 만들기 전 데이터 가져오자

링크

 1) themoviedb.org (.Join TMDB클릭해서 계정을 만들 것)

 2) https://developers.themoviedb.org/3/getting-started/introdution

API Docs

---

#3.1 Structure

-우리가 만들 영역을 살펴보자

 

1) 현재 영화관에서 상영중인 영화 보여주기

2) 개봉 예정 영화 보여주기

api method

 

3) 인기 영화(Trending URL로 가기)

인기 추세를 볼 수 있다

3가지 영역을 다르게 만들건데 다 Movies안에 있도록 만들 예정, scrollvies를 사용하고  API를 호출 할 것이다!

 

1. fetch로 api호출

2. axios로 api호출

✅배우는 과정이기에 scrollview + fetch로 한번, flatlist+hook (react query)로 한번 구현해본다

(어떤게 더 나은지 직접 경험하기 위해)
react query 링크  : https://react-query.tanstack.com/

 

이를 위해 아래 처럼 코드 바꿔주깅

---

#3.2 Movies Screen part One

- auto swiper에 대해 배워보자

이 슬라이드를 자동 플레이 될 수 있게 코드해본다

👀swiper를 살펴보자

링크 : https://reactnative.directory/?search=swiper

안드로이드,ios,웹을 위한 slider swiper

swiper를 영역에 반영해보자

-> 현재 상영중인 영화를 보여줄 swiper

-> 개봉 예정 영화를 보여줄 가로 리스트

-> 인기 영화를 보여줄 세로 리스트

이제 여기서 높이를 300으로 주는 대신, 화면 높이의 1/4만 차지하고 싶다?! = 화면 사이즈를 알아야한다.

react native에 이걸 할 수 있는 API가 있기 떄문에 알아낼 수 있다?! (높이와 넓이를 주는 Dimensions  }

import { Dimensions } from "react-native";

쵸큼 작아짐

swiper를 바꾸고 어떤 것들을 할 수 있는지 알아보자

링크 : https://github.com/reactrondev/react-native-web-swiper

GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web

이제 무비 데이터를 받아오자

---

#3.3 Movies Screen part Two

- loading state에 대해 배워보자

1 (2번과 결과는 같음)

2 (1번과 결과는같음)

이미지 파일 가져오기

가운데 동그라미 사이즈 바꿀 수 이뜸

파일만들어주고

WOW

---

#3.4 Movies Screen part Three 

- 두 가지 리스트를 만들어보자 (인기영화, 상영예정영화)

 

https://docs.expo.dev/versions/latest/sdk/blur-view/#blurtint

BlurView - Expo Documentation

tada-! 다크모드와 라이트 모드를 사용하기에 알아야함

요렇게 응용해주자

자 이제 포스터를 띄워보자 ^ㅁ^

이제 영화 제목과 영화설명은 하나의 컬럼안에 넣고 포스터는 다른 컬럼안에 넣어서 완성해보자

(API props를 활용하기)

---

#3.5 Refactor

- 

isDark ? a : b 라는 훅을 많이 안쓰신다고.....

여지껏 쓴 코드가 크고 못생겼다고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 축약 버전 알려준다네요 잼씀 ㅎ

이게 이렇게 된 이유는 컴포넌트를 이용했는데요, 제가 이 수업을 따라가는 것도 현재 벅찬 상태라,,,,,,,,

자세한건 챌린지 끝나고 다시 재정비 해보겠습니다!@

 

근데 제 손에 의해 이쁘게 다듬어지는건 재밌네요 증말 ㅎ

---

#3.6 Trending Movies

- Trending movies를 보여 줄 가로 리스트를 만들어보자

 

홀리몰리 넘 이뽀

---

#3.7 Coming Soon

- Coming Soon 리스트를 만들어보자

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

요걸 티비 스크린에서도 사용할때는 별개의 컴포넌트를 만들거임

- Coming Soon 리스트를 만들어보자

날짜 세팅 예시

---

#3.8 Refreshing 

- 새로고침을 배워보자

 

ㄱrefreshcontro;컴포넌트를 넘겨줘야함

https://reactnative.dev/docs/refreshcontrol

RefreshControl · React Native

---

#3.9 ScrollView vs FlatList

- ScrollView 성능보다 FlatList 좋기에 배워보자

 

https://reactnative.dev/docs/scrollview#refreshcontrol

ScrollView · React Native

 

 

 

flatlist는 똑똑해서 컴포넌트가 화면에 나타나기 직전에 컴포넌트를 render한다. = lazy render

 

https://reactnative.dev/docs/flatlist

FlatList · React Native

---

#3.11 FlatList part Two

- flatlist로 교체해주자

https://reactnative.dev/docs/flatlist#listheadercomponent

FlatList · React Native

이 글을 올릴까 말까 고민 많이 했어요

저도 강의를 따라 가기 급급한 수준인지라

 

일단 공부 히스토리를 남겨놓고 수정을 위해 공개로 변경합니다 :)

모두 열공이에요!