댓글 페이징
사용배경
페이징 방법으로는 앞서 설명한 게시판처럼 페이지를 버튼을 통해 이동하는 방법도 있지만 스크롤 방법으로 페이지를 이동하는 방법도 있다. 이것은 유튜브 댓글을 보고 아이디어를 얻었다.
즉 스크롤이 맨 밑에 도달하면 페이지를 이동한다. 이것을 본 프로젝트에 적용시켰다.
로직
스크롤 이벤트
스크롤 이벤트를 등록한다. 스크롤이 맨 아래에 닿는다면 setpage함수를 실행시켜 page를 1증가 시킨다. 하지만 page를 계속 증가시키면 안된다. maxpage까지만 증가시켜야 한다.
parseInt(total / 5)를 통해 maxpage를 계산한다.
의존성 변수로 page를 등록하게 되면 page가 변경될 때마다 useEffect함수가 실행된다.
page === -1을 한 이유는 첫 번째 페이지(여기서는 0)일 때 useEffect가 작동하지 않는다. 왜냐하면 변한게 없기 때문이다. 그래서 초기화 해줄 때에는 -1로 초기화해주었고 다시 0으로 초기화 하는 과정이다.
loginCheckSubmitProps함수
로그인을 체크하는 로직이다. 로그인 세션이 종료되면 더 이상 댓글을 볼 수 없도록 하기 위함이다.
selectReplyDataSubmit함수
댓글을 가져오는 함수이다. 마찬가지로 댓글도 페이징 처리를 해야한다. 5개 단위로 가져온다.
클라이언트에서는 배열로 댓글을 관리한다. 서버에서 받은 페이지별 데이터(5개)를 state변수에 저장한다. state변수에 직접 수정하게 되면 useState변수가 제대로 작동안하기 때문에 깊은 복사하여 복사한 배열을 가지고 설정하는 방법으로 해야 한다. 이렇게 하여 페이징 처리를 구현하였다.
selectreplyTotalSubmit함수
앞서 설명했을 때 무한 스크롤 이벤트에서 page가 계속 증가되면 안 되게 하였다. 이때 댓글의 총 개수를 가져와야하는데 위 로직이 댓글의 총 개수를 가져오는 코드이다.
결과
