react-infinite-scroll-component 5.1.0 공식문서
지난주부터 무한스크롤 하고 있었는데...
드럽게 안 되는 것임...
열이 받고 있었다...
그러는 도중 발견한 사실 한 가지...
dataLength 는 내가 띄울 모든 데이터의 길이가 아닌 지금 당장 이 화면에 띄울 데이터의 길이를 뜻하는 것이다.
그니까 내가 25개를 갖고 와서 마지막에서 무한스크롤이 trigger 됐을 때 다음 25개를 불러오려면,
이게 처음에는 25였다가 그 다음에 50 -> 75 -> 100 이런 식으로 늘어나야 한다.
즉, 동적으로 설계해야 하는 부분이고 처음부터 숫자를 박아놓거나 static한 값이면 안 됨...
써놔라... SSEONORAGO...
공식문서에서는
"set the length of the data. This will unlock the subsequent calls to next." 라고 써 놨는데,
"set the length of the data"하면 당연히 아~! 내가 불러올 총 데이터의 길이겠구나~! 하지 누가 지금 당장 띄울 길이 생각하냐고...
내가 바보인걸까...?
그럴 수도...
내가 무지했을 수도...
아니 실제로 무지하지만...
쨌든 이러고 그 다음에 깨달은 사실 또 한 가지...
hasMore boolean 값을 내가 컨트롤 하려고 하면 망함...^^
이건... 그 어디에도 없네... 아무도 건드리려고 하지 않았기 때문일지...
나는 얘가 true였다가 false였다가 하는 게 눈에 안 보이니까 내가 바꿔줘야 될 거라고 생각했다.
getNext = async () => {
if (this.hasMore) {
this.pageInfo.page += 1;
await this.getData(this.pageInfo);
}
this.hasMore = false;
}이런 식으로 getNext() 라는 함수가 불러와지고 마지막에서 hasMore의 값을 false로 바꿔주었는데
이것이...
무한스크롤을 동작하게 만들지 않는 조건이었음을...
장장 2일 반 정도 들여다 보게 만듦... 심지어 주말에도 종종 생각했다고...!
그런데 쟤를 컨트롤 하지 않으면 무슨일이 벌어지냐?
hasMore는 계속 true 값을 가지므로 조금만 밑으로 내려가면 랄라랄라 하면서 계속 API 쏘고 정보 가져올라고 함...
이 자식아... 그만해... 그만하라고...
하지만 그만하라는 조건을 안 넣었으니까 당연히 그만하지 않겠죠?
그래서 this.loading 이라는 상태를 만들어주고 얘를 내가 boolean 값 조절하면서 함수를 다시 만들었다.
getNext = async () => {
// hasMore가 true일 때 getNext 라는 함수가 불러와지는 거니까
// 이 함수 안에서는 loading이라는 또 다른 state를 내가 컨트롤 하면서
// API 호출하게 동작시켰다.
this.loading = true;
if (this.loading) {
this.pageInfo.page += 1;
await this.getData(this.pageInfo);
}
// 마지막에는 로딩을 false로 해야지 더이상 API를 호출하지 않음.
this.loading = false;
// 데이터의 전체 갯수와 띄우는 정보 배열의 갯수가 같으면
// hasMore를 false로 만들어서 아예 무한스크롤 동작 자체를 막았다.
// 이렇게 안 하면 밑에 loader 가 계속 '로딩중...' 이러고 떠 있음...
// 어차피 데이터는 다 떴고
// 사용자가 뭔가를 더 하고 싶으면 이 상태에서 완료하거나 페이지를 나갈 거라서.
// 그리고 이거 예외처리라서 뺀다고 위로 하면 안됨^^
// 그럼 맨 처음의 totalCount랑 dataList.data.Length가 0으로 똑같아서^^
// 함수가 안 돌아감^^
// 다 해놨는데 안 돼서 식겁했더니 이거 위치의 문제였다^^!
if (this.dataList.totalCount === this.dataList.data.length) {
this.hasMore = false;
}
}Seriously... this is the first debugging that I've ever done properly...
not really sure about this is called "debugging" though...
