[Spring, React] 페이지네이션, 고객 10명만 보여주고 페이지 넘기기.

 

 

 

고객 명단 표를 만들었다.
그럼 이제 10명의 정보만 보이도록
만들고싶다.

 

 

 

 

1. 동작화면

 

 

 

 

 

---

 

 

 

 

 

2. 페이지네이션

 

검색해서 찾아본 페이지네이션은, 방대한 정보 중 사용자에게 필요한 정보를 선별하여 일부분만 보여주는 기술을 말하는 것 같다. 아무래도 구글에 검색했을 때 구글이 가지고 있는 모든 정보를 다 보여준다면 아마 사용자의 메모리가 감당하지 못할 것이다. 그리고 무엇보다 기능에 의미가 없어질 듯 하다. 그래서 이 페이지네이션 기능을 활용하여 사용자의 메모리와 시간을 아끼는 듯 하다. 

 

일단 내가 한 프로젝트는 이미 고객 정보가 기입된 상태이고 그걸 관리하는 것이다. 거기다 고객 명단이 그리 방대한 양이 아니다. 그래서 그리 어렵지 않은 페이지네이션을 구현해도 되겠다는 생각을 했다. 아래 링크를 하나 걸어뒀는데 굉장히 다양한 디자인을 설명해주셨다. 거기서 나는 [이전 - 이후]로 페이지를 넘길 수 있는 형태의 페이지네이션을 만들어보기로 생각했다. 그리고 필요한 경우 검색을 해서 고객을 찾으면 되기 때문에 굳이 숫자로 페이지를 누르는 형태가 필요하지 않다고 생각했다.

 

결론은 서버로부터 고객에 대한 정보를 모두 받아올 것이다. 그러면 프론트에서 10개씩 슬라이싱해서 보여주는 방식으로 해볼 것이다.

 

 

 

- 페이지네이션 디자인

UI 디자인 가이드 : Pagination

 

 

- 페이지네이션 동작 원리

페이지네이션(Pagination)

 

 

- 오프셋 기반 페이지네이션

커서 기반 페이지네이션(Cursor-based-pagination) vs 오프셋 기반 페이지 네이션(offset-based-pagination

 

 

 

 

---

 

 

 

 

3. 전체 코드

    // 페이지 state
    const [page, setPage] = useState(1);
    const pageSize = 10;
    const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
    const startIndex = (page - 1) * pageSize;
    const pagedRows = rows.slice(startIndex, startIndex + pageSize);

                <div className="table-footnote">
                    <div className="pagination">
                        <button
                            type="button"
                            disabled={page === 1}
                            onClick={() => setPage((prev) => Math.max(1, prev - 1))}
                        >
                            ‹
                        </button>

                        <div className="page-indicator">{page} / {totalPages}</div>

                        <button
                            type="button"
                            disabled={page === totalPages}
                            onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
                        >
                            ›
                        </button>
                    </div>
                </div>
            </div>

 

 

 

 

---

 

 

 

 

4. 코드

const [page, setPage] = useState(1);

page의 초기값을 1로 설정했다. 아마 페이지가 넘어가면 setPage로 1이 아닌 2, 3으로 변경될 것이다.

 

const pageSize = 10;

10개의 정보를 보여주기 위해 pageSize는 10으로 지정했다. 그런데 이 코드를 적는다고 해서 10개의 정보가 보이는 것은 아니다. 정확히는 뒤의 코드에서 쓰기 위해 설정한 변수이다.

 

const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));

전체 페이지를 어디까지할건지 정하는 부분이다. pageSize는 위에서 10으로 정했다. 그리고 rows.length는 가져온 전체 고객 목록의 길이가 된다. 그러면 예를 들어 57개의 정보가 있다고 가정해보자. rows.length가 57이고 10으로 나누면 5.7이 된다.

Math.ceil은 반올림을 말한다. 5.7을 반올림하면 6이 된다. 그러면 코드를 다시 적어보자. Math.max(1, 6)이 된다. 이 말은 적어도 totalPages가 1 밑으로 떨어지진 않는다는 것이다. 왜 이렇게 설정했나면 화면을 보면 1/4 이런식으로 적혀있다. 페이지가 이전을 넘기다가 1보다 밑인 0으로 떨어지면 안되기 때문에 방어 차원으로 코드를 이렇게 작성했다.

 

const startIndex = (page - 1) * pageSize;

startIndex는 고객 정보를 어디서 자를건지 정하는 변수이다. 57개의 정보가 있다고 가정하면 처음엔 0번째에서 보여줘야한다. 그리고 두번째 페이지에선 10에서 또 10개의 정보를 보여줘야한다. 이런식으로 어떤 정보부터 보여줄지 정하기 위해 startIndex를 설정해줘야한다.

page는 1이 초기값으로 설정했다. page가 1인 경우, startIndex는 (1-1) x 10으로 0이 된다. page가 2인 경우, startIndex는 (2-1) x 10으로 10이 된다. page가 3인 경우, startIndex는 (3-1) x 10으로 20이 된다.

 

const pagedRows = rows.slice(startIndex, startIndex + pageSize);

이제 위에 적은 변수들로 슬라이싱을 해보자.

startIndex가 0이라면, rows.slice(0, 10);이 된다. 그니까 전체 고객 목록을 들고온 rows에서 0번째부터 9번째 자르게 된다. 이때 주의할 점은 슬라이싱은 startIndex+pageSize -1로 마지막으로 포함하는 인덱스가 된다. 그래서 9번째까지 보여주게 된다.

그렇게 나뉜 부분은 pagedRows가 된다. 그리고 슬라이싱은 있는 만큼 잘라주기 때문에 마지막 페이지가 10개가 안된다고 해도 문제 없다.

 

<button
    type="button"
    disabled={page === 1}
    onClick={() => setPage((prev) => Math.max(1, prev - 1))}
    >
    ‹
</button>

< 버튼은 페이지가 1이면 이전을 누를 필요가 없기에 disabled로 누를 수 없게 처리했다. setPage((prev) => Math.max(1, prev - 1)) 이 코드는 아래서 더 자세히 살펴보겠다.

 

<div className="page-indicator">{page} / {totalPages}</div>

현재 페이지와 전체 페이지를 나타내기 위해 적었다. {현재 페이지} / {전체 페이지}

 

<button
    type="button"
    disabled={page === totalPages}
    onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
    >
    ‹
</button>

< 버튼은 totalPages 보다 더 뒤로 갈 수 없도록 disabled로 나타냈다.

 

 

 

 

---

 

 

 

 

5. 함수 형태로 상태를 업데이트

setPage((prev) => Math.max(1, prev - 1))

setPage는 useState에서 설정한 것이다. 이런식으로 함수 형태로 업데이트하는 경우, 리액트에서 가장 최신의 이전 상태값을 prev에 넣어준다. 이렇게 코드를 작성하면 좋은 점이 사용자가 연속해서 빠르게 버튼을 누르는 경우 증가가 꼬이지 않고 문제없이 처리될 수 있다.

사실 이 코드는 AI가 수정해준 코드이다. 그럼 전에 직접 작성한 코드는 어떤 코드였는지 비교해보겠다.

 

setPage(page + 1)

이렇게 바로 값을 넣는 형식으로 코드를 작성했다. 이 코드는 지금 내가 보고 있는 페이지에서 +1을 한 것이다.

확실히 AI가 수정해준 코드가 안정성이 높은 듯 하다. 이렇게 새로운 걸 또 하나 배워간다.