refactor: #118/DonationsList의 데이터 불러오는 방식 변경 #127
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
hyeonjiroh
changed the title
| handleLoad({ cursor: cursorArr[cursorArr.length - 2] }); | ||
| cursorArr.pop(); | ||
| setCursorArr(cursorArr); |
There was a problem hiding this comment.
cursorArr.pop()으로는 cursorArr의 주소가 바뀌지 않아 setCursorArr(cursorArr)를 했을 때 리렌더링을 유도할 수는 없을 거 같아요!
리렌더링을 유도하지 않았더라도 cursorArr.pop()은 불변성을 훼손하기에 좋지 않은 거 같아요!
https://github.com/reactjs/react-basic?tab=readme-ov-file#state
리액트 컨트리뷰터가 작성한 글인데 state는 불변 데이터인 것이 상태 관리를 더 명확하고 예측 가능하게 한다고 해요!
그리고 위의 history.length > 1 조건처럼 cursor: cursorArr[cursorArr.length - 2] 에도 조건이 필요해 보여요! 그렇지 않으면 cursor=undefined로 전달되어서 멘토링 시간에 봤던 400 에러 발생할 거 같아요! 라고 했는데 잘 동작하네요?
const newCursorArr = cursorArr.length > 1 ? cursorArr.slice(0, cursorArr.length - 1) : [0];
handleLoad({ cursor: newCursorArr[newCursorArr.length - 1] });
setCursorArr(newCursorArr);혹시 몰라 길이에 대한 처리도 했는데 바로 slice한 값을 넣어도 될 거 같네요!
There was a problem hiding this comment.
우와 감사합니다! 효준님께서 알려주신 방법으로 수정해봐야겠네요! 400에러가 발생하지 않고 잘 동작한 건 cursorArr의 배열에 0을 초기값으로 넣어줘서인 것 같습니다! 그리고 cursorArr의 길이가 1 이하이면 이전 버튼을 비활성화 시켜서 배열의 길이가 1 미만이 될 일도 없고요! 꼼꼼하게 봐주시고 피드백까지 정성스럽게 남겨주셔서 감사합니다~!
#️⃣ Issue Number
#118
📝 요약(Summary)
PC 사이즈 화면에서 이전 페이지 데이터를 불러올 때의 방식 변경
이전에는 각 페이지의 데이터를 캐싱해서 이전 버튼을 눌렀을 때 현재 페이지의 데이터를 삭제하는 방식으로 이전 페이지의 데이터를 보여줬다.
그런데 이전 페이지의 값을 불러올 때만 캐싱을 사용하는 것이 불필요하다고 판단했다.
그래서 다음 버튼을 눌렀을 때 해당 페이지의 cursor 값(다음 버튼을 눌렀기 때문에 이전 페이지의 corsor 값)을 배열에 저장하고, 이전 버튼을 눌렀을 때 해당 배열에서 이전 페이지의 cursor 값을 찾아 해당 cursor 값을 query로 추가하여 get 리퀘스트 요청을 보내는 방식으로 변경하였다.
불필요하게 배경색 지정한 부분 삭제
body에 midnightBlack으로 배경색이 들어가게 되어서 ListPage와 NotFoundPage에 지정한 배경색을 삭제하였다.
🛠️ PR 유형
어떤 변경 사항이 있나요?