상황
좋아요 기능을 구현했다. 구현 후 개발자 도구에서 네트워크를 확인해보니... 한 번 좋아요를 누를 때마다 POST 와 DELETE 를 실행 후, GET 요청이 두 번이나 더 생긴다... API 요청 과다... 하하하
다가오는 회의에서 팀원들에게 해당 문제를 어떻게 해결하면 좋을지 물었다.
현재 코드 동작 방식
지금 코드는 다음 순서로 동작한다.
- 도서 상세페이지 이동 시
GET요청 - 좋아요 클릭 시,
DELETE또는POST요청 GET으로 바뀐 좋아요 정보를 요청
좋아요 여부(이미지 색상), 좋아요 개수 확인을 모두 서버와 통신하며 수행한다. 그래서 API 요청이 많았다.
제안 코드 동작 방식
팀원이 제안한 방법은 다음과 같다.
- 도서 상세페이지 이동 시
GET요청 - 좋아요 클릭 시,
DELETE또는POST요청 useState로 상태 변환하여 프론트UI만 변경
좋아요 여부는 true, flase 로 좋아요 개수는 +-1 로 상태를 관리하며 수행하는 것이다. 서버에 DELETE 또는 POST 요청은 가지만, 그 이후 GET 없이 변화를 UI에서 보여줄 수 있다.
제안된 방식으로 구현
나는 리뷰 개발을 마저 진행해야해서, 썬글님께 수정을 부탁드렸다! 썬글 만세...
결과는 다음과 같이 POST, DELETE 요청만 생긴다.
궁금증
사실... API 요청이 적을수록? 렌더링이 적을수록? 좋은건지 아닌지 아직까지 잘 모르겠다. 물론 불필요한 과정이라면 없애는게 좋다고 생각한다.
내가 궁금한 것은 프론트 UI 변화를 API 요청 없이 수행해도 좋은지 잘 모르겠다는 의미이다!
jaekim