React-native Tag 😊

react-native 에서는 HTML Tag 에서 특정 Tag 는 다르게 쓰고 있습니다.
또한 React Native에서 사용하는 특정 UI 컴포넌트들은 기본적으로 import를 통해서 받아와야 합니다.

대부분 HTML Tag 를 사용하지만 적게라도 다른 Tag 스타일을 사용하기 때문에 알아보도록 합시다.

import { Image, Text, TextInput, ScrollView, View} from "react-native";

---

🐣View

View 는 div Tag 와 똑같은 기능을 합니다.
하지만 View Tag 가 div Tag 와 다른 점은 기본적으로 flex 속성을 기본값으로 가지고 있습니다.

🐣Text

p Tag 와 똑같은 기능을 합니다.

🐣TextInput

input Tag 와 똑같은 기능을 합니다.
여기서 input Tag 와 다른점은 onPress 와 이벤트 name 이 다를 수 있습니다.

🐣ScrollView

react-native 에서만 있는 Tag 입니다.
기본적으로 페이지가 오버 됐을때 브라우저와 달리 스크롤이 생기지 않기 때문에 scrollView 태그로 감싸줘야 합니다.
즉 핸드폰을 손가락으로 세로로 드래그 하거나 가로로 드래그 할때 스크롤이 생기게 도와주는 기능입니다.

🐣Image

image Tag 와 똑같은 기능을 합니다.
여기서 image Tag 와 다른 점은 기존 img tag 는 경로를 rc=""로 입력했습니다.
하지만 react-native 에서는 source = {{uri: ""}} 또는 source = {require("")} 로 경로를 지정합니다.

---

refresh 😊

refresh 는 react native 에서 제공하는 새로고침 시 나타나는 화면 기능입니다.
아이폰을 기준으로 만약 화면을 최상단에서 손가락으로 꾹 누르고 아래로 내리게 되면 새로고침이 되는 기능입니다.

이때 refresh 는 ScrollView Tag 안에서 사용됩니다.
refresh 기능을 사용할 때 밑에 코드처럼 사용해주면 됩니다.

const [refreshing, setRefreshing] = useState(false);

const onRefresh = async () => {
	setRefreshing(true);
  	await getData();
  	setRefreshing(false);
}
    <Container
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
    >

---

FlatList

scrollView 를 사용하면 우리의 어플리케이션의 성능을 느리게 할 수 있습니다.
공식 문서에서도 나와있지만 scrollView 는 모든 자식 컴포넌트를 한번에 render 합니다.
즉 모바일 화면에서 아직 보이지 않는 component 들이 미리 렌더링이 완료된다는 뜻입니다.

scrollView 는 그래서 component 가 그리 많지 않는 환경에서 쓰면 좋습니다.

따라서 등장한 것이 FlatList 입니다.
FlatList 는 요소들을 "게으르게" render 해줍니다.
즉 component 가 화면에 나타나기 직전에야 component 를 render 해줍니다.

이러한 기능을 "lazy render" 라고 합니다.

또한 FlatList 는 무한 스크롤을 만들기 아주 쉬운 Props 를 가지고 있습니다.
다음 예제를 통해 알아보도록 하겠습니다.

<TrendingScroll>
  {trending.map(movie => (
    <VMedia
      key={movie.id}
      posterPath={movie.poster_path}
      originalTitle={movie.original_title}
      voteAverage={movie.vote_average}
      />
  ))}
</TrendingScroll>

// 🔻🔻🔻 이렇게 변경됩니다.

<FlatList 
  data={trending}
  renderItem={({item}) => (
    <VMedia
      posterPath={movie.poster_path}
      originalTitle={movie.original_title}
      voteAverage={movie.vote_average}
      />
  )}
  />

코드를 읽어보면 LatList 의 prop 으로 data, renderItem 이라는 것이 보이실 겁니다.
FlatList 는 두개의 필수 prop 을 가지고 있어야 합니다.
하나는 데이터입니다. 즉 render 을 할 대상이죠.
두번째 필수 prop 은 renderItem 입니다. renderItem 은 함수이며 인자를 하나 받는데
첫번째 인자는 객체이며 첫번째 속성은 item(FlatList 가 render 하려고 하는 대상) 입니다.
해당 item 을 통해서 원하는 component 를 customize 할 수 있습니다.

renderItem 은 js 의 map 메서드와 같이 요소 하나하나에 함수를 실행시켜 줍니다.

FlatList 의 엄청난 기능 중 하나는 요소들 사이에 특정 component 를 만들어 넣을 수 있습니다.
만약 어떤 요소 [1,2,3,4,5,6] 이 있고 이것들을 FlatList 로 정렬하다가 디자이너 분께서
저 숫자 사이에 이미지를 추가하고 싶어요 라고 하면 하나하나 다시 코드를 바꿔야하는 힘듬이 존재합니다.
하지만 FlatList 의 ItemSeparatorComonent 기능을 이용하면 손쉽게 해결이 가능합니다.

<FlatList 
  horizontal // <-- 세로 방향으로 바꾸기
  showsHorizontalScrollIndicator={false} // <-- 스크롤 바 없애기
  contentContainerStyle={{paddingHorizontal: 20}} // <-- 전체 container 의 스타일
  ItemSeparatorComponent={() =><View style={{width: 20}}/>} // <-- 요소 중간에 어떤 component 넣기
  keyExtractor={item => item.id} // <-- 개별 요소의 key 값
  data={trending}
  renderItem={({item}) => (
    <VMedia
      posterPath={item.poster_path}
      originalTitle={item.original_title}
      voteAverage={item.vote_average}
      />
  )}
  />

또한 keyExtractor 를 사용한 이유는 FlatList 는 일반적인 map 메서드로 key 값을 넣는 것과 달리
key 값을 각 요소에 어떤 key 를 넣어줘야 하는지 FlatList 에게 알려주는 함수를 만들어야 합니다.

FlatList 중첩

만약 FlatList 안에 scrollView 를 넣어주면 어떻게 될까요??
작동은 하긴 하지만 react-native 에서는 권장하지 않습니다.
FlatList 자체가 스크롤 가능한 컴포넌트이기 때문에 FlatList 안에 ScrollView를 중첩해서 사용하는 것은 권장되지 않는 것이죠.

근데 생각해보면 FaltList 를 부모 Container 로 하고 그 안에 각기 다른 데이터가 들어있는 자식 Component 를 만들수 없지 않나요??

맞습니다. FlatList 안에 자식 컴포넌트를 넣는건 할 수 없는 방식입니다.
그럼 자식 요소에 어떻게 넣어야 할까요? 대표적으로 ListHeaderComonent, ListFooterComponent 가 이를 도와줍니다.

사용법은 아주 간단합니다. FlatList 에 prop 으로 ListHeaderComponent 를 넣어준 뒤에 ListHeaderComponent={<> 넣어줄 컴포넌트들.. </>}
이렇게 사용하면 됩니다. ListHeaderComponent 는 FlatList 의 rederItem 으로 만든 컴포넌트들 위에 생성되게 됩니다.
그럼 ListFooterComponent 는 어떻게 될까요? 마찬가지로 FlatList 의 rederItem 으로 만든 컴포넌트들 아래에 생성되게 됩니다.