1. 무한스크롤
무한스크롤이란 인스타그램처럼 화면 밑으로 슬라이드 해서 내려갈 경우 데이터를 불러오는 것을 말한다.
2. FlatList란?
FlatList는 ScrollView와 더불어 React-Native에서 스크롤을 담당해준다.
둘의 차이는 FlatList는 보이는 화면에서 보이는 데이터만 가져오는 반면 ScrollView는 모든 데이터를 가져와 렌더링하고 스크롤을 만든다.
즉 데이터를 불러오는 방식에서 차이가 있는 것이고 FlatList의 경우가 조금 더 성능이 좋다.
왜??
모든 데이터를 다 불러오지 않아도 되기 때문에
FlatList를 살펴보면 여러가지 프로퍼티가 있지만 그 중 data와 renderItem은 반드시 들어가야 한다.
data의 경우는 FlatList에서 보여주고 싶은 데이터들을 말하고
renderItem은 위에서 data를 받아서 보여주는 화면이라고 생각하면 된다.
즉 map함수와 비교하자면
const testData = [{title:"1번"}, {title:"2번"}]
testData.map((item) => (
<div>{item.title}</div>
))
const renderItem = ({item}) => {
return(
<View>
<Text>{item.title}</Text>
</View>
)
}
<FlatList
data={testData}
renderItem = {renderItem}
/>위와 같이 사용할 수 있는데 map의 인자로 받는 item부분이 FlatList에서 data이고 리턴값으로 들어가는 <div>{item.title}</div>가 FlatList에서 renderItem이 되는 것이다.
이때 FlatList역시 따로 함수를 만들지 않고 renderItem={({item}) => return 뭐시기}로 만들 수 있다.
3. 구현
const testData = [{title:"1번"}, {title:"2번"}, {title:"3번"}, {title:"4번"}, {title:"5번"}]이 더미데이터로 구현해 보도록 한다.
여기서 불러오는 데이터는 위의 더미데이터와 동일한 형식이며 한번에 5개씩 불러와지고 위의 데이터는 axios로 불러와서 useState에 담겨있다고가정한다.
물론 실제로는 페이지네이션이 되어 있어서 조건을 주기 쉽다
axios를 이용해서 구현할 것이다.
일반 렌더링을 관여하는 태그는 만들지 않고 FlatList와 데이터를 불러와줄 함수만 적을 것이다.
데이터 불러오는 함수
const [data, setData] = useState(testData)
const getMoreData = async () => {
try{
if(데이터를 불러올 조건 예를 들어 현재페이지가 전체페이지보다 작을 경우){
const response = await axios.get('주소')
setData([...data, ...response])
}
}catch(error){console.log(error)}
}위와 같이 예를 들어 작성했다.
내가 주소로 데이터를 보내고 그 결과값인 response라는 배열을 setData 즉 기존의 데이터가 담겨져있는 state로 보내준다. 이때 기존의 데이터가 없으면 안되기 때문에 반드시 얕은복사를 통해서 복사해주고 새로 불러온 데이터와 합쳐준다(스프레드 연산자 이용)
FlatList
여기서 필요한 프로퍼티는 onEndReached가 있다.
물론 onEndReachedThreshold나 ListFooterComponent도 있지만 전자는 밑에 얼마만큼 떨어져야 새로 불러오냐고 후자는 데이터가 불러와질 때 로딩바 처럼 어떻게 할 것인지 처리해주는 함수이다.
하지만 가장 중요한 onEndReached는 현재 있는 데이터 슬라이드 바닥에 닿았을 때 새로운 데이터를 불러와주는 함수이다.
즉 위에서 작성한 함수가 들어가야 한다.
<FlatList
data={data}
renderItem={대충 렌더링해주는 함수}
onEndReached={getMoreData}
/>위의 처럼 해주면 쉽게 무한스크롤을 구현할 수 있다.
