pagination (페이지네이션) 이란 + 리액트로 pagination 구현하기

[woohm402]

페이지네이션이란?

페이스북이나 인스타그램, 트위터 등의 SNS 서비스는 어떻게 구현되어 있을까요? 당연히 서버에서 값을 불러오겠죠. 그런데 글이 아주아주 많을 텐데, 그걸 한 번에 다 불러올까요? 그런 건 효율적이지 않습니다. 불필요한 통신량도 많이 먹고 속도도 느려지겠죠

이를 해결하기 위해 페이지네이션 이라는 기법이 있습니다. 원소가 아주 많을 때 그들을 n개씩 끊은 페이지로 나누고 필요할 때 특정 페이지를 불러오겠다는 아이디어예요

페이지네이션에는 다양한 방법이 있습니다. 구글 처럼 버튼형으로 만들 수도 있고 페이스북처럼 스크롤형으로 만들 수도 있습니다. 버튼형과 스크롤형의 장단점은 이 글 에 잘 설명되어 있습니다. 이중 과제에서는 스크롤형 페이지네이션을 요구합니다. 예상하시다시피, 구현하기는 버튼형이 조금 더 쉽습니다.

페이지네이션 구현하기

페이지네이션은 서버와 프론트 양쪽에서 모두 구현해야 합니다. 서버는 api에서 url query를 끄집어내서 파라미터에 따라 n페이지의 값을 잘 꺼내서 반환하도록 구현되어야 하고, 프론트는 ui에 따라 적당한 상황이 트리거되었을 때 다음 페이지를 잘 호출하도록 구현되어야 합니다.

페이지네이션의 종류에는 크게 두 가지가 있습니다. 첫 번째는 오프셋 기반이고, 두 번째는 커서 기반입니다. 둘의 차이는 데이터를 어떻게 가져오느냐에 있으니, 이를 서버의 입장에서 간단하게 설명하겠습니다. (http라 치고)

• 오프셋 기반 페이지네이션
  • 한 page에 몇 개의 아이템이 있는지와 몇 번째 page를 원하는지를 api를 통해 어떻게 받습니다. (아마도 ?page=1&size=5 이런 식)
  • 데이터베이스에 접근하여, 해당 아이템들 중 앞에서부터 size * (page - 1) 개를 건너뛰고 그 다음 size 개를 꺼냅니다.
  • 형식에 맞춰 반환합니다.
• 커서 기반 페이지네이션
  • 한 page에 몇 개의 아이템이 있는지와 무슨 아이템 다음부터를 원하는지를 api를 통해 어떻게 받습니다. (아마도 ?cursor=123jsd12&size=5 이런 식)
  • 데이터베이스에 접근하여, cursor에 해당하는 아이템 이후 size개를 꺼냅니다.
  • 형식에 맞춰 반환합니다.

둘의 차이는 이 글 에 잘 설명되어 있습니다. 사실 우리 과제도 커서 기반으로 구현하는 게 낫습니다

아무튼 우리의 과제는 오프셋 기반 페이지네이션으로 구현되어 있고, 한 페이지 크기는 20입니다. 서버가 어떻게 구현되어 있는지 궁금하시다면 오픈소스로 열려있으니 확인해보시기 바랍니다.

react 에서 infinite scroll 구현하기

infinite scroll을 구현하려면 먼저 페이지 크기에 대한 배경지식이 필요합니다.

• 페이지 크기의 종류
• scrollHeight - scrollTop - clientHeight = ?
• ref -> 수업에서 배웠죠
  • 주의: createRef 말고 useRef 쓰시는 게 좋습니다 (궁금하시다면 Q&A 고고)

이제 구현해 봅시다! 일단 상태에 대해 생각해보겠습니다. 상태는 두 개가 필요합니다.

• 현재 몇 번째 페이지인가요?
• 아이템 목록 데이터

infinite scroll이 다음 페이지를 불러오는 타이밍은 "스크롤이 맨 밑에 도달했을 때" 입니다. 이를 트리거하려면 onscroll이라는 이벤트를 사용해야 합니다. 우리는 JSX를 쓰니까 이런 식으로 하면 됩니다. (경우에 따라 ul 이 아니라 div나 section 등일 수도 있겠죠)

<ul onScroll={handleScroll}> ... </ul>

자 이제 ulelement가 스크롤될 때마다 handleScroll 이 호출되겠습니다. 그럼 handleScroll 함수는 뭘 해야 할까요?

const handleScroll = () => {
  // 만약 페이지의 끝에 도달했다면
  //   스크롤이 끝에 닿았는지 체크하기 위해 ul 아이템의 scrollHeight clientHeight scrollTop 이런 걸 가져와야겠네요
  //   그걸 체크하려면 ref 객체 만든 다음 ul에다가 ref 걸고 어케어케 해야겠네요
  //   암튼 도달했다면 다음 페이지를 불러와서
  //   다음 페이지 배열의 값을 원래 있던 데이터 배열이랑 합친 다음 setState 합니다
}

다 알려드릴 순 없으니 저 정도 의사코드로 때우겠습니다 :) 아주 논리적이죠? 설명 간소화를 위해 page state 변경이나 다음 페이지가 있는지 체크하는 로직 등은 딱히 넣지 않았는데, 코드 짜보고 분석하셔서 잘 처리해 주세요!

참고로 성능상의 이유로 스크롤 이벤트의 핸들러 함수에는 스로틀 을 적용하는 게 일반적입니다.