[내일배움캠프 TIL] 48일차

Jaehyeon Ye·2023년 1월 4일

오늘 새로 배운 것

style={StyleSheet.absoluteFill}은
style={{position:absolute, top:0, left:0}}
을 간단하게 써줄 수 있다.

Swiper를 react-native-swiper 라이브러리를 설치, import해주고 height를 적용해준다.

Dimensions

react-native 라이브러리의 Dimensions를 이용하면 physical device의 가로, 세로 넓이를 계산해준다.

import { Dimensions } from 'react-native';

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

Dimensions.get('window')를 통해 width와 height를 각각 SCREEN_WIDTH, SCREEN_HEIGHT라는 변수로 구조분해할당해줄 수 있다.

Loading 표시

  const [isLoading, setIsLoading] = useState(true);
  ...
  const getNowPlaying = async () => {
    ...
    setIsLoading(false);
  };
  ...
  if (isLoading) {
    return (
      <View style={styles.loader}>
        <ActivityIndicator />
      </View>
    );
  }

시간이 걸리는 것을 표현 isLoading 이라는 state로 default는 true 렌더링 다 되면 false

Promise.all([])

각각의 배열을 인자로 받고 각 배열 요소 또한 promise. 모든 promise가 끝나야 다음으로 넘어감. 각 비동기 요소들이 끝나야 promise로 반환됨.

RefreshControl

화면을 땡겼을 때 refresh 해서(pull to refresh) 다시 데이터를 받아와 렌더링
ScrollView에서는 RefreshControl 컴포넌트를 추가해야하지만 FlatList에는 RefreshControl이 내장되어있어서 onRefresh가 있으면 pull to refresh를 활성화할 수 있다.

FlatList

왜 scrollView 대신 FlatList라는 컴포넌트를 사용하나?

scrollView는 모든 자식 컴포넌트를 한번에 렌더링 - 리스트 숫자가 많을수록 느려짐. 퍼포먼스적으로 좋지 않음.
FlatList는 화면에 보이는 것만 신경쓰고 보이지 않는 것은 나중에 렌더링함(renders item lazily). 리스트가 많다면 FlatList를 사용하는 것을 권장.
화면에서 벗어나면 벗어나는 것들은 remove되어 memory가 save됨.

FlatList 컴포넌트는 self-closing 컴포넌트이므로 자식을 가질 수 없음.
props로 핸들링함.
필수적으로 renderItem과 keyExtractor이 들어감.
renderItem은 배열로 렌더링할 요소들을 뿌려주는 역할
FlatList는 내부에 map 자체가 내장되어 있지만 key값을 지정해줘야하고 그 key값을 지정해주는 속성이 keyExtractor이다.

renderItem={({ item }) => <UpcomingMovies movie={item} />}
keyExtractor={(item) => item.id}

동적 StyleSheet.create 적용

const isDark = useColorScheme() === 'dark';
...
<Text style={prop_styles(isDark).movieTitle}>{movie.title}</Text>
<Text style={prop_styles(isDark).release}>{movie.release_date}</Text>
<Text style={prop_styles(isDark).subOverview}>
...
const prop_styles = (isDark) =>
  StyleSheet.create({
    movieTitle: {
      color: isDark ? 'white' : 'black',
    },
    release: {
      fontSize: 16,
      color: isDark ? 'white' : 'black',
      marginTop: 10,
      marginTottom: 10,
    },
    subOverview: {
      fontSize: 12,
      color: isDark ? 'white' : 'black',
    },
  });