페이지네이션 검색 관련 트러블슈팅
2022-08-17
문제상황
- 검색 시에 1페이지에서 검색하면 검색결과가 제대로 보이는데, 2페이지에 넘어가서 검색하면 검색결과가 보이지 않았다.
원인
- 서치인풋과 데이터테이블은 다른 컴포넌트로 되어있다.
- 현재 몇 페이지인지는
currentPage 라는 데이터테이블 내부의 state로 관리되고 있다.
- 서버에서 페이지네이션 하지 않고 tableData를 currentPage라는 state값을 이용해 slice해주는 방식으로 클라이언트 사이드에서 페이지네이션 하고 있었다.
- 페이지를 2페이지로 이동 후 검색 했을 때 currenPage가 1로 초기화되지 않아 해당 이슈 발생
→ 데이터테이블 내부에서 검색했는지 안했는지를 알 수 없으므로 검색해도 계속 currentPage가 페이지네이션 된 2페이지로 남아있게 된 것.
해결
- useEffect로 tableData를 잡고 변경될때마다 setState 해준다.
- currenPage를 전역으로 관리하고 검색하는 곳에서 검색할때마다 currenPage를 1로 초기화해준다.
→ currentPage가 과연 전역으로 관리되어야할 값인가? 🤔
- 클라이언트단 말고 서버에서 페이지네이션을 한다.