React Native

Dark Mode

참고 블로그

Image, ActivityIndicator

참고 블로그

Image

ActivityIndicator

ScrollView와 FlatList의 차이점

<ScrollView>

• 모든 리스트들을 한번에 렌더링 해야해서 리스트가 많을 수록 성능이 저하된다.

<FlatList>

• 화면에 보이지 않는 리스트들은 메모리에서 제거하고, 화면에 보이는 부분들만 렌더링하여 리스트가 많이 있어도 성능 저하를 최소화 시킨다. (⭐️무한스크롤 적용에 매우 적합⭐️)

속성 FlatList 속성 링크

React Query

소개

• Server State, 비동기 데이터를 관리하기 위한 라이브러리임.

특징

• useQuery hook 안에서 API get 요청을 담당하고, API 요청 결과 및 다양한 상태들을 바로 사용할 수 있음. (Redux thunk 사용할 필요 없음.)

• 한 번 API 요청 시, queryKey가 API 요청결과는 cache에 저장하고, caching된 API 요청은 다시 서버에 하지 않고 cache memory에서 더 빠르게 불러온다.
  

• 예시 코드

const fetcher = () =>
     fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
       res.json());

const { isLoading, error, data } = useQuery('repoData', fetcher)

// fetch, get 요청을 받을 때, 보통 useQuery (hook)를 사용한다.
// useQuery는 queryKey, fetcher 함수를 인자로하여 두 개를 인자로 받는다.

무한 스크롤