-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
인피니트 스크롤링 lastId
22.02.08 16:13 작성 조회수 179
0
안녕하세요 제로초님 강의 잘 보고 있습니다.
다름이 아니라 강의 소식에서 본
Intersection Observer 를 사용한 인피니트 스크롤링을 보고 궁금한 것이 있어 질문을 드립니다.
lastId 없이 디스패치해도 게시물들이 나오던데
lastId를 같이 디스패치 하신 이유가 무엇인지
감이 안 잡혀 질문 드립니다!
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import AppLayout from "../components/AppLayout";
import PostCard from "../components/PostCard";
import PostForm from "../components/PostForm";
import { LOAD_POSTS_REQUEST } from "../reducers/post";
// 어떤 Element가 화면(viewport)에 노출되었는지를 감지할 수 있는 API
import { useInView } from 'react-intersection-observer';
const Home = () => {
const dispatch = useDispatch();
const { me } = useSelector((state) => state.user);
const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((state) => state.post);
const [ref, inView] = useInView();
// 처음 게시물들 불러올 때
useEffect(() => {
dispatch({
type: LOAD_POSTS_REQUEST,
});
}, []);
useEffect(() => {
if (inView && hasMorePosts && !loadPostsLoading) {
const lastId = mainPosts[mainPosts.length - 1]?.id;
dispatch({
type: LOAD_POSTS_REQUEST,
lastId,
});
}
}, [inView, hasMorePosts, loadPostsLoading, mainPosts]);
/*
더 보여줄 게시물이 있고, 게시물을 보여주기 위한 로딩 중이 아닐 때
+ PostCard들 아래에 위치한 div가 화면에 보일 때(마지막 게시글을 봤다는 얘기)
=> inView가 true가 되면서 두 번째 useEffect가 작동함.
=> 마지막 게시글에 가까워질 때쯤 불러오도록 수정함.
*/
return (
<AppLayout>
{me && <PostForm />}
{mainPosts.map((post, i) => {
if (i === mainPosts.length - 3) {
return (
<>
<div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} />
<PostCard key={post.id} post={post} />
</>
)
}
return <PostCard key={post.id} post={post} />
})
}
</AppLayout>
)
}
export default Home;
답변을 작성해보세요.
답변 1