댓글이 만약 1만개라면...? 아니면 이미지가 포함된 댓글이라면?
한번에 가져올때 로딩이 걸리거나 속도가 느려질게 뻔하다
특정 컴포넌트(요소,태그) viewport 안에 발견되어있는지를 감지하는 라이브러리
(이외에도 react window, react infinite scroll 등 여러가지가 있다)
npm install react-intersection-observer --save
import {useInView} from "react-intersection-observer";
const ActivityCommentSection = (props)=>{
.
.
.
// 앞에있는 ref는 우리가 관찰할 요소를 알려주는데 사용
// 뒤에있는 inView는 우리가 관찰할 요소가 화면에 나타나면 true
// 안나타나면 false가 들어있는 변수
const [ref, inView] = useInView();
<CommentListWrap>
{
commentList.map((comment)=> <CommentBlock
key={comment.id}
onDeleteClick={onDeleteClick}
comment={comment}
/>)
}
<div ref={ref} style={{backgroundColor:'red'}}>ddd</div>
</CommentListWrap>
const [currentPage, setCurrentPage] = useState(1);
const [isEnd, setIsEnd] = useState(false); // 댓글을 끝까지 다 가져왔다면 true 아니면 false가 들어있음
.
.
.
// 댓글 목록 가져오기
useEffect(()=>{
let tmp = async ()=>{
if(accessToken === null) return;
if(inView === false) return;
if(isEnd === true) return;
try{
let res = await axios.get(`/api/comments?activityId=${props.activityId}&limit=${3}&page=${currentPage}`, {
headers:{Authorization:`Bearer ${accessToken}`}
})
setCurrentPage(currentPage + 1); // 2페이지로 바꿔놓고
if(res.data.length === 0){
setIsEnd(true);
}
setCommentList([...commentList, ...res.data]); // 기존에 3개가 있었으면 +3개를 추가해서 배열로 붙여줘야 함
}catch(err){
alert('댓글목록 오류');
}
}
tmp();
}, [props.activityId, accessToken, inView]); // 의존성배열(바뀌면 다시 실행해줘)
const onCommentClick = async ()=>{
try{
let res = await axios.post('/api/comments', {
content,
activityId: props.activityId
},
{headers:{Authorization:`Bearer ${accessToken}`}}
);
// 댓글목록을 끝까지 다 가져온 상태라면 직접 화면에도 보이게 추가
if(isEnd === true){
setCommentList( [...commentList , res.data] )
}
alert('댓글 추가 성공!!');
}catch(err){
alert('댓글 추가 중 오류 발생..!');
}
}
app.get('/api/comments', async(req, res)=>{
const activityId = Number(req.query.activityId);
const limit = Number(req.query.limit); // 몇개?
const page = Number(req.query.page); // 몇페이지?
const offset = (page-1) * limit;
let sql=`
select * from tbl_comments
where activity_id = ?
order by created_date asc
limit ? offset ?;
`;
try{
const token = req.headers.authorization.replace('Bearer ', '');
let user = jwt.verify(token, process.env.JWT_SECRET);
let [results] = await pool.query(sql, [activityId, limit, offset])
.
.
.
}catch(err){
res.status(500).json('오류발생');
}
})