페이지네이션 검색 관련 트러블슈팅

2022-08-17

문제상황

  • 검색 시에 1페이지에서 검색하면 검색결과가 제대로 보이는데, 2페이지에 넘어가서 검색하면 검색결과가 보이지 않았다.

원인

  • 서치인풋과 데이터테이블은 다른 컴포넌트로 되어있다.
  • 현재 몇 페이지인지는 currentPage 라는 데이터테이블 내부의 state로 관리되고 있다.
  • 서버에서 페이지네이션 하지 않고 tableData를 currentPage라는 state값을 이용해 slice해주는 방식으로 클라이언트 사이드에서 페이지네이션 하고 있었다.
  • 페이지를 2페이지로 이동 후 검색 했을 때 currenPage가 1로 초기화되지 않아 해당 이슈 발생
    → 데이터테이블 내부에서 검색했는지 안했는지를 알 수 없으므로 검색해도 계속 currentPage가 페이지네이션 된 2페이지로 남아있게 된 것.

해결

  1. useEffect로 tableData를 잡고 변경될때마다 setState 해준다.
  2. currenPage를 전역으로 관리하고 검색하는 곳에서 검색할때마다 currenPage를 1로 초기화해준다.
    → currentPage가 과연 전역으로 관리되어야할 값인가? 🤔
  3. 클라이언트단 말고 서버에서 페이지네이션을 한다.