[TIL][RN] 영화 리뷰앱 클론코딩 사전준비(2)

Linear Gradient

• install

  npx expo install expo-linear-gradient

• import

  import { LinearGradient } from 'expo-linear-gradient';

• props
  여러가지가 있는데, colors만 써도 충분

  <LinearGradient color={['black', 'transparent']} />

---

StyleSheet.absoluteFill

매우 유용할 것 같다.

{StyleSheet.absoluteFill}
// 아래와 같은 것
{
  position : 'absolute',
  left: 0,
  right: 0,
  top: 0,
  bottom: 0
}

---

react-native-swiper

• install

  npm i react-native-swiper --save

• import

  import Swiper from 'react-native-swiper'

• usage
  swiper를 그냥 감싸주기만 하면 된다.
  크기를 지정하지 않으면 자동으로 flex: 1임

• 공식문서

  https://github.com/leecade/react-native-swiper

---

Dimensions

실제 스크린너비와 높이값을 구할 수 있다.

import { Dimensions } from 'react-native'
Dimensions.get('window')

---

API 연동

• 회원가입 -> 프로필 -> 설정 -> api발급

  https://www.themoviedb.org/

• api 문서 -> movies -> get 원하는 정보 -> try it out -> api_key입력 -> url복사 -> 확인

• 내가 쓸 정보 key 확인

  backdrop_path: 배경이미지
  id: 아이디
  overview : 영화 설명
  poster_path : 포스터이미지
  title: 영화 제목
  vote_average : 평점

---

Promise.all

• * async 함수는 항상 promise를 반환

• 공식문서

  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

• 모든 비동기 함수가 실행 되어야 return

  awiat Promise.all([함수1(), 함수2(), 함수3()])

---

RefreshControl

• ScrollView에서 스크롤로 잡아당겨서 새로고침하는 컴포넌트

• 속성

  • refreshing={boolean}
  • onRefresh={function}

---

FlatList

• 공식문서

  https://reactnative.dev/docs/flatlist

• ScrollView vs FlatList

  • ScrollView는 모든 리스트를 한 번에 렌더링해서 많으면 성능이 떨어짐
  • FlatList는 화면에 보이는 리스트만 렌더링함

• 자식컴포넌트를 가질 수 없음 props로 핸들링

  • data={array}

  • renderItem={function}
    매개변수의 이름은 item, index, separators

    renderItem({item, index, separators});
    // item(object) -> data가 렌더링되는 항목

  • keyExtractor={function}
    map기능이 내장되어있기 때문에 key를 주는 것

  • ListHeaderComponent, ListFooterComponent
    말 그대로 컴포넌트를 넣을 수 있음

  • onRefresh={functoion}
    RefreshControl가 필요없음(대박)

  • 등등..

---

Linking

• 어플리케이션 설치여부까지 확인하여 이동시켜주는 react-native 내장 api