React-Native / Styled-components /FlatList / React-Query

RN - Stlyed - Components

사용법은 웹과 비슷하지만 불러올때 /native 폴더 지정해주자

 

Adding TypeScript to Existing Project

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

프로젝트에 위 를 설치하고

Root에 tsconfig.json을 만들어

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

추가 해준다. 후에 나머지 파일을 모두 tsx로 바꿔준다. 제일 중요한 건index.js는 건들지 말자.

 

타입스크립트를 사용하다가도 .jsx를 사용하면 JS를 사용할 수 있다.

후에 styled.d.ts를 사용하기 위해 서는 웹과 방식은 동일하다

 

만약 theme color를 작성해놓은 ts파일이 style이면 바꿔주어야한다. styled.d.ts와 충돌이 일어난다.

 

React Navigation은 이미 가져올 수 있는 많은 Types를 제공해준다. 

 

 

Swiper - React Native Web Swiper 

스와이퍼 컴포넌트를 제공한다.

 

Expo BlurView - npx expo install expo-blur

IOS 개발할 시 npx pod-install 도 해야한다.

설치하고 npm run 을 다시 실행해야한다. native 요소에 접근한 것을 새로 설치한다면 무조건 해야한다.

 

React-Native - StyleSheet.absoluteFill

제일 많이 사용되는 패턴의 css가 제공되어진다.

<View style={StyleSheet.absoluteFill}>
	<Text>텍스트</Text>
</View>

StyleSheet.absoluteFill	은

const ContView = styled.View`
	position:absolute;
	width:100%;
    height:100%
`

같다

 

 

TIP. 날짜 관련

new Date('2021-12-20').toLocaleDateString("ko")
//2021.12.20
new Date('2021-12-20').toLocaleDateString("ko",{month:'long', day:'numeric', year:'long'})
//2021년 12월 20일

 

FlatList

ScrollView는 많은 도움을 주지만 application 퍼포먼스에 좋지 않다.

ScrollView는 모든 자식 컴포넌트를 한번에 render한다는 것이다. 그러니까 화면에 나오지 않는 부분까지 모두 로딩을 하고 렌더링 한다는 것이다. 그러기 위해서 FlatList가 등장한다. 이것은 Lazy하게 만들어준다.

FlatList는 렌더링하기 위한 perfomance interface이다.

또한 SectionList도 있는데 (https://reactnative.dev/docs/sectionlist) 링크에가서 확인하도록 하자 . IOS 어플 개발시 매우 유용할것으로 보임.

 <FlatList
          //FlatList 내부에서 스스로 map과 같이 처리해줌.
          data={trending}
          //renderItem은 function이고 1개의 인자를 받고 component를 반환해주면 된다.
          renderItem={({item}) => (
            <Trending
              backdropPath={item.~~~}
              originalTitle={item.~~~}
              voteAverage={item.~~~}
            />
          )}
        />

여기서 경고가 뜰 수도 있는데 VirtualizedList는 같은 방향의 ScrollView 안에 감싸져 있음 안된다.

FlatList는 Children을 가질수 없다.

수직방향의 FlatList를 수직방향의 ScrollView 안에 넣을 수 없다. 이것을 가능하게 하는것은 ListHeaderComponent 이다.

ListHeaderComponent는 컴포넌트를 모든 아이템 위쪽에 render해버린다.

unmount

우리가 탭을 눌러 컴포넌트를 떠나면 해주는 방법은  Tab.Navi에서 screenOption에 unmountOnBlue:true prop을 작성해주자

 

QueryClient

react query를 사용할때 한번에 refetch를 하는 방법이 있는데 refetch와 isRefetching을 사용해서 하는 방법도 있지만 코드가 길어진다. 그러기 위해서 useQueryClient를 사용해주면 좋다.

queryClient는 제일 큰 단위라고 생각하고 useQuery는 개별단위라 생각하자.

refetchQueries를 하면되는데 여기서 제일 제일 중요한 핵심포인트는 useQuery에서 key를 적어주는 곳에 배열을 만들고 첫번째에 묶어줄 카테고리를 작성하고 그후에 키를 작성해준다. 

const queryClient = useQueryClient();
 const {
    isLoading: nowLoading,
    data: nowData,
    isRefetching: isRefechingNowPlay,
  } = useQuery<IMovieData>(["movies", "nowPlay"], movieApi.getNowPlayingMovie);
  const {
    isLoading: trendLoading,
    data: trendData,
    isRefetching: isRefechingTrend,
  } = useQuery<ITrending>(["movies", "trendMoive"], movieApi.getTrendingMovie);
  const {
    isLoading: upcomeLoading,
    data: upcomeData,
    isRefetching: isRefechingUpcome,
  } = useQuery<IMovieData>(
    ["movies", "upcomeMovie"],
    movieApi.getUpcommingMovie
  );
  const activeRefresh = async () => {
    await queryClient.refetchQueries(["movies"]);
  };