작은 시작점

ScrollView

<View style={styles.goalsContainer}>
    <ScrollView alwaysBounceVertical={false}>
      {courseGoals.map((goal) =>
        <View key={goal} style={styles.goalItem}>
          <Text style={styles.goalText}>{goal}</Text>
        </View>
      )}
    </ScrollView>
  </View>

ScrollView는 전체 UI가 렌더링 될 때마다 안에 있는 항목 전부 렌더링 한다.

목록이 일정 화면을 넘어가 길어질 때, 화면에 보이지 않는 부분도 화면 뒤에서 계속 렌더링 된다.

목록이 길다면, 수천개, 수만개의 목록이 있다면?  성능 문제가 생길 수 밖에 없다.

그래서 분량이 제한된 콘텐츠에는 적합하지만, 길어질 수 있는 동적 목록에는 부적합하다.

사용할 수는 있지만,  동적 목록 리스트에는 성능 저하를 피하기 위해 잘 안 씀

이럴 때 ScrollView 대신에 사용할 수 있는 것이 FlatList이다.

FlatList

스크롤을 실현하는 컴포넌트

보이는 항목만 렌더링되며, 화면 밖의 항목은 사용자가 스크롤을 해야 로딩 및 렌더링 된다.

내부에서 필요한 항목만 렌더링, 나머지는 스크롤해서 가까이 다가갈 때 렌더링

목록이 아주 긴 경우에 적합 !

필요한 사항만 렌더링하는 방식으로 목록을 효율적으로 렌더링 한다.

☆  필수 프로퍼티

data : 목록에서 출력할 데이터를 지정하는 역할, 배열 형태로 제공

renderItem : 매개변수로 현재 항목에 대한 정보를 받아 해당 항목을 어떻게 렌더링할지 결정

렌더링 해야할 때 개별적으로 함수 호출하여 주어진 항목에 대해 렌더링 할 jsx 코드로 반환

KeyExtractor : 각 항목에 대해 고유한 키를 추출

<FlatList
      data={courseGoals}
      renderItem={(itemData) => {
        return (
          <View style={styles.goalItem}>
            <Text style={styles.goalText}>{itemData.item.text}</Text>
          </View>
        )
      }}
      keyExtractor={(item, index) => {
        return item.id
      }}
      alwaysBounceVertical={false} />

data의 courseGoals 배열을 renderItem에서 각 항목(itemData)으로 받아온다.

해당 항목을 어떻게 렌더링 할지에 대한 jsx 코드가 있고, 각 항목에 대해 개별적으로 호출되어 목록 전체를 렌더링

courseGoals의 배열의 각 항목은 객체로 정의되어 있으며,

 {
    text: enteredGoalText, id: Math.random().toString()
  }

text의 값에는 내가 입력한 목표, id는 고유한 키(랜덤 값)가 들어가 있는 것을 확인할 수 있다.

ScrollView 코드와 비교해보면 map 함수를 통해 목록을 수동으로 렌더링하지 않는다는 것을 알 수 있다.