[React Native Master Class By Nomad Coders] #3 Movie App

Refleshing

• 앱에서 아래로 당기는 모션에 화면이 새로고침되는 기능
• RefreshControl API Link

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const wait = (timeout) => {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

ScrollView vs FlatList

ScrollView

• 모든 자식 컴포넌트를 한번에 render 한다.
• 마지막까지 스크롤하지 않아도 마지막 자식 component까지 render가 진행된다.
• 자유롭게 사용할 수 있지만 성능이 좋지 않다.

FlatList

• 컴포넌트가 화면에 나타나기 직전에 컴포넌트를 render한다.
  => lazy render
• 당연히 아주 빠르고 퍼포먼스가 좋아진다.
• 무한 스크롤을 만들기 아주 쉬운 prop을 가지고 있다.
• 게다가...리스트의 각 item들의 간격을 지정할 수 있다. 따로 마진값을 컴포넌트 스타일에 적용할 필요가 없다... 어메이징..
  => 그거슨 바로 'ItemSeparatorComponent'이다. 자세한 부분은 docs에서..
  
• DOCUMENT LINK

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

React Query

• Hooks를 통해서 fetch 데이터에 접근하기 편리하다.
• Data, Loading State에 대한 정보를 모니터링할 수 있다.
• Caching, Infinit Scroll 기능도 지원

1.Set-up

• 'queryClient를 만든다.
• Application을 'QueryClientProvider'로 감싼다.
• 준비 끝

2.Fetcher

• fetch를 직접적으로 사용하는 것이 아닌, useQuery 훅의 인자로 사용
• fetch operation을 useQuery 훅에 넘겨준다.
• useQuery 훅은 fetch가 어떻게 작동하든 추적을 시작하고,우리에게 fetch 후 돌아오는 data, error, loading state에 대한 정보를 공유해준다.

정리하자면...

• fetch operation을 useQuery 훅의 인자로 넘겨준다.
• useQuery 훅이 fetch operation을 추적한다.
• fetch가 찾은 데이터, 발생한 error, 현재 loading 여부의 정보들을 우리에게 전달해준다.

3.Caching

• caching system을 위해서 query마다 key string이 필요하다.
• 데이터가 한번 fetch가 되면 다시 fetch를 진행하지 않는 걸 의미한다.
• fetch가 끝난 컴포넌트에서 다른 컴포넌트로 이동 후, unmount 이후에 다시 해당 컴포넌트로 돌아와도 서버에 fetch를 다시 요청하지 않고, caching data를 그대로 사용한다.
• 매번 화면을 전환하고 unmount가 진행된 후에 돌아올때마다 서버에 데이터를 요청할 필요가 없고, 이는 선능향상에 도움이 된다
• 다른 컴포넌트에서 똑같은 키의 쿼리를 사용한다면, 다시 fetch가 필요 없다... 어메이징

4.Query Disable Option

• 기본적인 쿼리들은 컴포넌트가 실행되면 쿼리요청 로직이 실행된다. 컴포넌트가 실행되도 쿼리요청을 막을 수 있는 옵션이 있다.
• query 옵션에 'enabled:false'를 지정해주면 컴포넌트가 실행되도 해당 쿼리요청은 실행되지 않는다.

const {isLoading, data, refetch} = useQuery(["