무한 스크롤 구현 시 게시물이 중복되거나 누락되는 문제가 발생했다.
원인
api/pets/search?page=${newPayload.page}&size=${newPayload.size}&memberLongitude=${newPayload.longitude}&memberLatitude=${newPayload.latitude}&description=${newPayload.description}&searchKey=${newPayload.searchKey}&searchValue=${newPayload.searchValue}
이 코드는 검색 요청이다. page와 size, 사용자의 위치정보, 검색 key, 검색 value가 들어간다.
원인은 검색 요청 URL에서 page, size가 필요한데 요청 시 size는 고정이 되어 있지만 page의 값은 무한 스크롤 구현 시 페이지네이션으로 계속 +1 씩 더해 요청해야 한다. 하지만 더하는 과정에서 1에서 3으로 건너뛰거나 같은 페이지를 두 번 요청하는 경우가 발생했다.
- 페이지 검색 요청
... builder.addCase(__getPostSearch.fulfilled, (state, action) => { if (typeof action.payload === "string") { state.responseMessage = action.payload; } else if (typeof action.payload === "object") { state.postSearchLists = [...state.postSearchLists, ...action.payload]; state.searchPage = state.searchPage + 1; } }); ... - 배열 초기화
... completeSearch: (state) => { // state.searchPage = 1; state.publicSearchLists = []; state.postSearchLists = []; }, ...
redux-toolkit을 사용하여 API 요청이 완료되면 검색 요청한 배열을 state에 저장하고 page를 1씩 증가시킨다. 추가적으로 사용자가 다시 검색을 할 경우에는 기존 State를 초기화해야 하므로 State의 Action을 사용하여 처리했다. 그 과정에서 주석 처리한 부분과 같이 요청하는 페이지도 1로 초기화해주었는데, 이 과정에서 비동기 처리가 되는 과정에서 배열은 초기화 후 잘 받아왔지만 요청된 페이지는 1이 더해져 2가 되기 때문에 위와 같은 문제들이 발생하는 것이었다.
해결
- action 추가
...
resetSearchPage: (state) => {
state.searchPage = 2;
},
...- 검색 최초 요청 함수
...
const searchDistanceHandler = (distance) => {
if (distanceState) {
const payload = {
page: 1,
size: 15,
...
};
...
dispatch(completeSearch());
dispatch(__getPostSearch(payload)).then(() =>
dispatch(resetSearchPage())
);
} else {
dispatch(toggleDescriptionCategory(distance));
}
};
...- 무한 스크롤 시의 payload값
const petworkSearchPayload = {
page: searchPage,
size: 15,
...
};따라서 다음과 같이 수정해 주었다. 우선 페이지 번호를 리셋하는 액션을 따로 만들어 주었고, 검색 요청이 완료되었을 때에만 페이지 번호를 1로 초기화해 주었다. 그리고 마운트 시의 요청은 무조건 1로 고정하고 initialState에서 페이지의 기본 값은 2로 설정해 주어서 사용자가 스크롤할 때 요청되는 값은 2부터 시작하도록 변경하였다.
회고
개발이 계속 진행되면서 코드가 점점 복잡해졌다. 특히 검색 기능은 사용자의 위치를 고려해야 해서 매우 복잡해졌다. 따라서 어떤 부분에서 오류가 발생했는지 파악하기 어려웠다. 로그를 천천히 찍어보고 네트워크도 확인해보면서 원인을 찾았지만, 이미 시간이 부족한 상황에서 콘솔을 하나하나 찍어보며 파악하는 것은 비효율적이라는 생각이 들었다. 또한 검색 기능과 관련된 Action이 많았는데, 이것 역시 에러 추적이 어려웠다.
또한 Redux를 사용하는 이유는 부모-자식 관계의 다른 컴포넌트에 Props를 전달할 때 Props drilling을 막기 위해 사용한다. 그러나 이번 프로젝트를 진행하면서 너무 무분별하게 사용한 것은 아닌지 생각해 보게 되었다.
