프로젝트 중 한방에 나오는 것 보다 스크롤 내릴 때 나오는게 더 예쁠 것 같다는 생각이 들어서
급하게 무한 스크롤을 만들어 보았다.
만들기 전에 알아야 할 것은
이 세개를 알아야하는게
아래 코드는 서버와 통신하기 전 코드입니다.
const handleScroll = (e) => {
console.log(e.currentTarget.scrollHeight, '스크롤높이');
console.log(e.currentTarget.clientHeight, '클라이언트높이');
console.log(e.currentTarget.scrollTop, '스크롤탑');
const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
if (scrollHeight - scrollTop === clientHeight) {
setPage((prev) => prev + 1);
console.log('페이지 업');
}
};
useEffect(() => {
//여기서 계속 추가를 해줘야함
const listSliceLength = 9;
const loadData = async () => {
//추후 서버와 통신하여 데이터를 가져오는 부분
setIsLoading(true);
let remainder = state.ClothesData.slice(listSliceLength);
let list = state.ClothesData.slice((page - 1) * listSliceLength, page * listSliceLength);
console.log('데이터 가져오기');
console.log('나머지', remainder);
console.log('리스트', list);
//9개를 뽑기전에 전체 길이가 9 보다 작은 경우
// 9보다 많은 경우
if (remainder.length >= 12) {
setData((prev) => [...prev, ...list]);
} else {
list = state.ClothesData.slice(0, state.ClothesData.length);
setData((prev) => [...prev, ...list]);
}
setIsLoading(false);
};
loadData();
}, [page]);
라는 코드를 만들 수 있음
비동기 처럼 보이기 위해 임시로 setTimeout 설정
useEffect(() => {
//여기서 계속 추가를 해줘야함
const listSliceLength = 9;
const getData = () => {
setTimeout(() => {
let remainder = state.ClothesData.slice(listSliceLength);
let list = state.ClothesData.slice((page - 1) * listSliceLength, page * listSliceLength);
console.log('데이터 가져오기');
console.log('나머지', remainder);
console.log('리스트', list);
//9개를 뽑기전에 전체 길이가 9 보다 작은 경우
// 9보다 많은 경우
if (remainder.length >= 12) {
setData((prev) => [...prev, ...list]);
} else {
list = state.ClothesData.slice(0, state.ClothesData.length);
setData((prev) => [...prev, ...list]);
}
setIsLoading(false);
}, 1000);
};
const loadData = async () => {
setIsLoading(true);
getData();
// setIsLoading(false);
};
loadData();
}, [page]);