[TIL] 페이지네이션

곽재훈·2024년 5월 18일

오늘 나는 무엇을 공부했는가.

목록 보기

31/55

1. 페이지네이션

URL로 데이터를 요청할 때, 만약 데이터의 양이 무수히 많아서 한 번에 1억개의 데이터를 받아온다면 컴퓨터에 부하가 올 수 있을 것이다. 그래서 서버에서는 일정한 단위를 기준으로 해서 분절된 정보들을 보내주는데, 보통 URL 요청에 대한 response에는 page에 대한 정보들이 담겨있다.

위의 글에서는 page라는 속성과 total_pages라는 속성을 통해서 페이지의 값과 다음 페이지의 여부를 확인할 수 있는데, 어떤 경우에는 모든 페이지의 숫자 대신 hasNext: true등의 boolean값으로 다음 페이지에 대한 정보를 직접적으로 주기도 한다.

여기서는 쿼리가 offset과 limit이라는 값을 받아서 현재 페이지의 위치와 추가로 받아오고 싶은 데이터의 양을 직접 조절할 수 있다.

  useEffect(() => {
    handleLoad({ order, offset: 0, limit: LIMIT });
  }, [order]);

여기서 offset은 처음에 한 번 값이 0으로 할당되면 추가로 실행될 필요가 없고, order의 경우에는 정렬 기준을 바꾸는 값이므로 바뀔 때마다 데이터를 다시 받아와야 하기 때문에 Dependency Array안에 추가해준다.

  const handleLoad = async (options) => {
  const { reviews, paging } = await getReview(options);
  if (options.offset === 0) {
    setItems(reviews);
  } else {
    setItems([...items, ...reviews]);
  }
  setOffset(options.offset + reviews.length);
  setHasNext(paging.hasNext);
};

만약 첫 로딩이어서 offset의 값이 0일 경우 불러온 아이템들을 setItems()의 인자로 넘겨주고, 이미 불러온 데이터가 있다면 현재 불러와져있는 데이터에 더해서 새로운 데이터를 합한 뒤에 setItems()의 인자로 넘겨준다.

2. 조건부 렌더링

javascript에서 boolean값은 &&(AND), ||(OR) 연산자로 연결해주면 참과 거짓을 평가할 때, 경우에 따라서 계산에 포함되지 않는 부분이 생기기도 한다.
그 이유는 연산의 효율성을 위해서인데, 예를 들어서 false && true 라는 boolean 표현식이 있다면, 이 식은 false를 반환할 것이다. && 연산자는 앞과 뒤의 모든 값이 true여야만 true를 반환하기 때문이다. 즉 앞의 값이 false라면 뒤에 오는 값이 true든지 false든지 간에 결과값이 false로 정해져있기 때문에 뒤의 값에 대한 평가가 일어나지 않는다.

false && true
// 앞이 false라서 뒤의 true에 대한 평가나 실행은 이루어지지 않음.

이런 논리연산자들의 평가 규칙이나 순서를 이용해서 React에서 조건부 렌더링을 구현할 수 있다.

1) &&(AND) 연산자

show는 boolean값인데 변수의 이름을 보면 show가 true일 경우에 렌더링해주려는 의도라고 볼 수 있다.
표현식을 보면 show && <p>...</p>의 형식인데 여기서 HTML TAG나 React Element는 항상 true값이라고 볼 수 있다.
그래서 만약 show가 false라면 뒤의 값에 대한 연산이 일어나지 않아서 렌더링이 발생하지 않는 것이다.

2) ||(OR) 연산자

여기가 약간 특이하고 신기한데, hide는 아마도 true일 경우에 렌더링을 하지 않으려는 의도라고 볼 수 있다. or 연산자는 앞과 뒤의 값 중에서 하나만 true여도 결과값이 true로 반환되기 때문에 앞의 값이 true일 경우에는 뒤의 값에 대한 평가가 일어나지 않는다. 즉 hide가 true일 경우에는 뒤의 값에 대한 평가가 일어나지 않아서 렌더링되지 않는 것이다. 이 부분이 가장 신기하고 신선했다. 단순히 결과값에 대한 비교가 아니라 논리연산자의 평가 순서나 원리를 이용한 조건부 렌더링이라니... 싱기해.