React Native: ScrollView, FlatList (+key 생성 방법)

💡 ScrollView

• 웹사이트에서는 요소가 사용 가능한 공간을 넘어서면 기본값으로 스크롤바가 나타나 스크롤 가능 -> 앱은 따로 설정 필요
• React Native에서 제공하는 ScollView 사용

	import { ScollView } from "react-native";

• ScollView는 스크롤 기능만 제공 -> 외부 View를 통해 화면상 영역이 차지하는 공간을 제어해야 함 (View 컴포넌트 내부에 ScollView 위치시키기)

	<View>
		<ScollView>
        	{courseGoals.map((g) => (
            	<View key={goal}>
                	<Text>{goal}</Text>
                </View>
			))}
		</ScollView>
	</View>

• ScollView가 지원하는 속성은 공식 문서에 잘 정리되어 있음
  
  
  

---

💡 FlatList란?

• ScollView는 항목이 많아지면 현재 화면에서 안 보이는 부분까지 렌더링해야 하므로 초기 렌더링 시에 시간이 오래 걸림 (성능 저하) -> 보이는 항목만 렌더링하고, 화면 밖의 항목은 사용자가 스크롤해야 렌더링하는 FlatList 사용
• 많은 양의 데이터가 존재할 때 혹은 데이터의 양이 가변적일 때 사용하는 컴포넌트 (ex. API를 통해 외부에서 크기를 알 수 없는 데이터를 가져올 때)
  
  

💡 FlatList 예시

	import { FlatList } from "react-native";
    
	<View style={styles.goalContainer}>
        <FlatList
            data={courseGoals}
            renderItem={(itemData) => {
                return (
                    <View key={goal} style={styles.goalItem}>
                    <Text style={styles.goalText}>{itemData.item.text}</Text>
                    </View>
                );
            }}
        />
    </View>

• 코드 설명
  • data={courseGoals}: FlatList에 표시할 데이터를 설정 (courseGoals는 배열)
  • renderItem={(itemData) => { ... }}: 각 항목을 렌더링하는 방법을 정의하는 콜백 함수 (data로 받은 각각의 item들을 렌더링시켜줌)
  • <Text style={styles.goalText}>{itemData.item.text}</Text>: <Text> 컴포넌트를 생성하고, itemData.item.text를 통해 각 항목의 텍스트 데이터에 접근하여 화면에 표시 (itemData: 현재 항목에 대한 정보를 담고 있는 객체, 인덱스(itemData.index)와 값(itemData.item) 존재)
    
    
• ScollView 부분을 대체하나, 밑과 같은 차이점이 있음
  • 셀프 클로징 사용
  • 필요할 때만 데이터를 로딩하는 최적화 작업을 제외하면, 내부적으로는 ScollView와 유사
  • 데이터를 수동으로 매핑할 필요 없이(map 사용할 필요 X), 해당 작업을 FlatList로 전달하여 필요한 데이터만 렌더링
    
    

** 콜백 함수(callback function): 다른 함수에게 전달되어 나중에 실행되는 함수. 즉, 함수를 인자(argument)로 받아들이고, 이 함수를 나중에 필요한 시점에서 호출하는 패턴.

---

💡 ScrollView와 FlatList를 효율적으로 관리하기 위한 key 생성 방법

• 방법1: 개발자가 키를 직접 관리하는 방법
  • 데이터의 값을 key 프로퍼티를 포함하는 객체로 변경 -> 데이터에 키 부분을 추가하여 객체({})로 생성 ({text: enteredGoalText, key: Math.random().toString()})
• 방법2: keyExtractor 프로퍼티 사용
  • keyExtractor: js에서 map()를 사용할 때, 데이터의 추적이 좀 더 쉽도록 아이템 각각에 고유의 키를 부여해주는 것 (주로 FlatList에서 사용)
  • 각 아이템의 키를 동적으로 생성할 수 있으며, 특히 데이터가 동적으로 변경되거나 외부 데이터 소스(ex. API)에서 아이템을 가져올 때 유용