swsnu / swpp2020-team7

냉장고 파먹기 - 냉장고 속 재료를 기반으로 나만의 레시피를 추천받자! 주변 이웃과 재료 거래는 덤!
https://naengpa.shop/
3 stars 3 forks source link

Article list filters not working correctly (1 rendering delayed) #114

Closed vegeshop closed 3 years ago

vegeshop commented 3 years ago

ArticleList에서 필터링이 해당 버튼을 누를때 적용되지 않고, 그 다음 렌더링에서 적용됩니다. 나눔 필터를 클릭해서 활성화해도 나눔이 포함된 게시글들이 나타나지 않습니다. 다른 버튼을 누르거나, 쿼리를 바꾸거나, 나눔 버튼을 다시 눌러 끄면 나눔 필터가 반영돼 나타납니다.

필터를 눌렀을때 optionsFilter의 해당하는 스테이트가 바뀌는데, 리렌더링될때는 바뀌기 전의 구 값이 사용되는 것이 원인입니다. UseEffect에서 동작 순서와 디펜던시를 적절히 조정해, 필터 값이 바뀐 후 디스패치로 요청을 보내도록 만들어야 할 것 같습니다...

lynn0506 commented 3 years ago
Screen Shot 2020-12-14 at 7 51 37 AM

고쳤습니다! useCallback으로 해당 page, query, 각각 filter 조건 변경 시에 loading을 true로 만듬과 동시에 해당 함수가 불리도록 하고, useEffect에 의해서 onLoadPage가 불릴 때, rerender되도록 했습니다. 더불어 해당 option filter들을 각각의 state로 나누었고, 결과적으로 filter 별 조건도 잘 작동합니다,,, 다만, pagination이 필요해 보입니다. 한 번에 많은 게시글을 가져와서 filter를 하고 있는데 필요한 페이지만 가져오도록 해야할 것 같습니다. recipelist와 비슷하게 수정하면 될 듯합니댜!!