Capstone #7. [RN] 정적 데이터는 ScrollView, 동적 데이터는 FlatList / FlatList의 props 종류

 

안녕하세요!

오늘은 React Native의 ScrollView와 FlatList의 차이에 대해서 알아보려고 하는데요!

 

저의 프로젝트에는 두가지가 적절하게 선택되어 사용하고 있어요.

(아마두?? ㅎㅎㅎ....)

 

두 가지 컴포넌트는 스크롤 가능한 콘텐츠를 표시하기 위해 사용되며

스크롤 가능한 아이템을 감싸는 컴테이너 역할을 하며, 자식 컴포넌트들이 모두 해당 컴포넌트 안에서 렌더링이 돼요!

기본적으로 수직 스크롤을 지원하지만, horizontal 속성을 통해 수평 스크롤도 지원한답니다!

 

이렇게 비슷한 역할을 하는 컴포넌트인데, 

어떤 차이를 가지고 어떤 상황에 어떻게 적절하게 쓰는지 짚고 넘어가면

프로젝트에 더욱 더 도움 되실 거예요 ~~❤️❤️

 

ScrollView 의 쓰임

 

 

ScrollView 는 화면 상관없이 모든 요소를 한 번에 렌더링 하기 때문에 성능 저하를 발생시켜요

그러므로 화면을 벗어나는 긴 텍스트, 개수가 한정된 리스트 등에 적합해요.

 

저는 그래서 이 컴포넌트를 회원가입 화면, 글 작성화면에 사용하였어요.

 

왜냐하면,

회원가입이나 프로필 화면, 글 작성 화면 등등은

콘텐츠가 반복되지 않거나 동적 데이터 렌더링이 필요하지 않잖아요.

이런 화면에서는 일반적으로 몇 가지 양식 필드, 정적 텍스트 및 일부 이미지가 있거나

고정된 양의 정보 그리고 복잡한 데이터 처리가 필요하지 않아

해당 화면을 구현할 때 ScrollView를 사용하였답니다.

 

 

 

이런식으루요!

이렇게 반복되지 않고 고정된 양의 데이터들은

ScrollView를 이용하였답니다.

 

특히 header나 footer 모두 하나의 스크롤에 배치해야 하는 상황이라면 

ScrollView를 사용하는 것도 좋은 선택이 될 것 같아요!

 

 

FlatList 의 쓰임

 

 

FlatList는 ScrollVIew와 달리 모든 요소를 한꺼번에 렌더링 하지 않고, 현재 화면에 렌더링 될 요소만 렌더링을 해줍니다.

첫 화면에서 해당 화면만큼의 아이템이 렌더링이 되고, 사용자가 아래로 스와이핑 함에 따라 더 많은 아이템들을

렌더링 하게 해 줘요!

 

뭔가 채팅이나 되게 많은 데이터들을 동적으로 가져올 때 사용하면 좋을 것 같지 않나요~~??

 

실제로 길고 동적인 항목 목록을 표시하는 화면에 FlatList를 주로 사용합니다.

특히 데이터 기반의 반복 구성 요소가 있는 경우에 더더욱 FlatList를 사용해 주면 좋아요!

 

저는 피드 혹은 메시지 목록, 사용자 리스트 목록 등등 동적 데이터가 포함된 큰 데이터 항목들을 

FlatList로 표현해 주었어요.

 

 

 

이런 데이터 들이요!

데이터들이 동적으로 많이 생성되잖아요.

그러니 일단 보이는 항목만 먼저 로드하고 스크롤할 때 동적으로 로드/언로드 하여

렌더링을 더욱 최적화해주었습니다.

 

따라서 FlatList가 ScrollView보다 성능면에서는 뛰어나겠죠?

 

그래서인지 코드 구현도 조금 복잡해요 ㅎㅎ

하지만 이해하고 보면 할만하다는 거!

 

FlatList 구현해 보기 / FlatList Props 종류

 

 

FlatList는 모든 데이터를 한 번에 렌더링 하지 않고 화면에 보이는 부분 or 설정한 개수만큼 만 보이게 된다.

 

데이터의 길이가 변할 수 있고, 데이터의 양을 모를 때 사용하기 좋은 컴포넌트

 

렌더링 초기에는 적절한 양의 데이터만 렌더링 한 뒤, 유저의 상호작용에 의해 Scroll이 움직일 때 필요한 부분을 추가적으로 렌더링 하기 때문에 성능이 좀 더 향상됨

 

위와 같은 특징을 가지고 있는 플랫리스트!

 

const [posts, setPosts] = useState([]);

 const fetchPosts = async (isInitialLoad = false) => {
    try {
      const response = await Client.users.getBoard();
      setPosts(response.data);
    } catch (error) {
      ... 다른 코드들
    }
  };

 const renderPost = ({item}) => {
    return (
      <TouchableOpacity
         ... 다른 코드들
      </TouchableOpacity>
    );
  };

<FlatList
          data={posts}
          renderItem={renderPost}
          keyExtractor={(item) => item.id}
          contentContainerStyle={HomeStyle.listContent}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }
/>

 

 

메인 화면단에서 구현한 코드입니다.

 

FlatList의 props를 살펴봅시다!

 

- data : 만들고자 하는 리스트의 source를 담는 props입니다.

fetchPost에서 메인 화면에 뿌려지는 데이터들을 posts에 담았어요.

 

- renderItem : 1개의 item을 render 시키는 props입니다. item이라고 이름 짓는 것은 약속된 컨벤션이에요!

 

- keyExtractor : 각 항목에 고유한 키를 할당하는 데 사용해요! 이는 react native의 렌더링을 최적화하고 업데이트를 효율적으로 처리하는데 필수적입니다! (제대로 안 해주면 key중복 워닝이나 에러가 엄청 떠요.. 이 부분 잘 지정해 주세요)

 

제 코드에서

 

keyExtractor={item => item.id}

 

각 항목에 고유한 id를 지정해주고 있죠

각각 안정적인 식별자를 갖도록 보장해 주는 부분입니다!

성능을 더욱 향상하고 목록의 항목이 변경될 때 부적절한 다시 렌더링 또는 ui 결함과 관련된 문제를 방지합니다!

 

- refreshControl : 당겨서 새로 고침 기능을 구현하는 데 사용하였어요

 

 

+) 추가 알아두면 도움 되는 props들

 

- onEndReachedThreshold : 목록의 가장 마지막 아이템의 어느 높이에 도달 시 onEndReached이 수행되는지 지정( 값 : 0~1, 높을수록 빨리 onEndReached가 수행)

 

- onEndReached : 스크롤이 목록의 하단에 도달할 시 액션 지정

 

- ListHeaderComponent : 목록의 상단, 항목 앞에 렌더링 할 구성요소 입니다. 이는 헤더, 제목 또는 기타 소개 콘텐츠에 유용하게 사용 가능해요!

 

- ListFooterComponent : 모든 항목 뒤 목록 하단에 렌더링할 수 있어요. 

 

- initialNumToRender : 스크롤하기 전에 처음 렌더링 할 항목 수입니다. 이는 목록이 클 때 성능을 최적화하는데 유용해요

 

- maxToRenderPerBatch : 한 배치로 렌더링 할 최대 항목 수입니다. 이는 성능문제를 방지하기 위해 한 번에 렌더링 되는 항목 수를 제어하는 데 도움이 됩니다.

 

- horizontal : true로 설정할 경우 세로가 아닌 가로로 스크롤됩니다.

 

- extraData : 목록이 변경될 때 목록의 다시 렌더링을 트리거할 수 있는 추가 데이터입니다.

 

- listEmptyComponent : data 배열이 비어 있을 때 렌더링할 구성 요소를 작성해요!

 

- ItemSeparatorComponent : 목록의 항목 사이에 구분 기호를 렌더링 하는 데 사용되는 구성 요소입니다. 

목록 항목 사이에 줄이나 간격을 추가하는 데 사용해요!

 

 - onRefresh : 사용자가 목록을 새로 고치기 위해 당길 때 트리거 됩니다.

 

- scrollEnabled : 목록 스크롤을 활성화하거나 비활성화합니다.

false로 설정하면 목록을 스크롤할 수 없습니다.

 

 

---

 

유용한 props들이 정말 많죠!

이 props로 정말 많은 기능들을 구현할 수 있어요

 

나의 프로젝트 화면의 성격에 맞게

적절한 컴포넌트를 사용할 줄 아는 프론트엔드 개발자 됩시당~~ 🤩🤩❤️❤️😍😍⭐⭐👍👍

 

그럼 20000..