TIL : ReactNative

absoluteFill

: position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 라고 쓰던 style내용을 StyleSheet의 absoluteFill로 적용할 수 있다.

<BannerBackground
        style={StyleSheet.absoluteFill}
      />

---

Linear Gradient

: 이미지 그라데이션 ( 스타일은 StyleSheet로 적용! ) 을 나타내는 컴포넌트로, 단일 컴포넌트로 사용한다.

<BannerBackground
        style={StyleSheet.absoluteFill}
      />
<LinearGradient
     style={StyleSheet.absoluteFill}
     colors={["transparent", "black"]} // 어떻게 그라데이션 줄건지!
      />

---

Dimensions

: react-native의 Dimensions을 이용해서 기기의 실제 너비와 높이를 구하여 사용할 수 있다. 이용하고 있는 창 크기가 변경되면 이용기기의 창 크기로 업데이트된다.
( 참고 : 공식문서 )

import { Dimensions } from "react-native";

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } =
  Dimensions.get("window");

---

ActivityIndicator

: <ActivityIndicator />는 로딩 중이라는 걸 표시하는 애니메이션 컴포넌트

---

Promise.all

: 프로미스를 반환하는 비동기 함수를 인자로 받는 함수로, 모든 Promise가 끝나야 프로미스객체를 반환하고 다음으로 넘어가게 된다.

const getData = async () => {
    await Promise.all([Promise1(), Promise2(), Promise3()]);
  };

---

FlatList

• ScrollView 모든 리스트들을 한번에 렌더링 해야해서 리스트가 많을 수록 성능이 저하됩니다.
• FlatList는 화면에 보이지 않는 리스트들은 메모리에서 제거하고 화면에 보이는 부분들만 렌더링하여 리스트가 많이 있어도 성능 저하를 최소화 시킵니다. (무한스크롤 적용에 적합!
  (참고 : 공식문서 )

{/* ScrollVies안에서 state.map으로 List 나타냈을 때 */}
<ScrollView>
{topRated.map((movie) => (
  	<View key={movie.id} movie={movie} />
 ))} 
</ScrollView>

<FlatList
      data={topRated} {/*state*/}
      renderItem={({ item }) => <View movie={item} />} 
  {/*renderItem은 item객체를 인자로 받는 콜백함수를 속성으로 가진다.*/}
      keyExtractor={(item) => item.id}
  {/*key값을 부여하는 속성으로 .map처럼 하위컴포넌트에 key를 적용 안해도 된다.*/}
      ItemSeparatorComponent={<View style={{ height: 20 }} />}
  {/*리스트 사이에 View컴포넌트를 넣어 간격을 지정해 줄 수 있다.*/}
      ListHeaderComponent={<></>}
  {/* 모든 항목의 맨 위에 렌더링되도록 FlatList 이전의 내용들을 하나의 컴포넌트로 만들어준다.*/}
 />

---

RefreshControl

:스크롤을 이용해 새로고침 처리하는 속성

{/* ScrollView에서 사용할 때 */}
<ScrollView
      refreshControl={
        <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
      	}
      >
</ScrollView>

{/* FlatList에서 사용할 때 */}
<FlatList
   refreshing={isRefreshing}
   onRefresh={onRefresh}
/>

---

오늘 만났던 오류

1. Linear Gradient 적용이 안 되었다.

   ❓ 상위컴포넌트에 position이 적용이 안되었다. 또한, style을 styledComponent로 적용하려고 했다.

   ❗️ 상위컴포넌트와 LinearGradient 컴포넌트에 style={StyleSheet.absoluteFill} 을 적용함으로써 해결할 수 있었다.