Bug : like button 페이지 넘길시 getItems()가 비활성

[cmun2]

에러 내용

page가 1이였을때 like button이 제대로 활성화 되나 pagination 이후 like button을 눌렀을때 getItems()로 리렌더링이 제대로 되지 않는 버그 발생

page가 1일때 :

page가 넘어갈때:


isLiked가 true에서 false로 리렌더링이 되지 않는 것을 볼 수 있다.

눌렀을때는

isLiked가 true로 바뀌는것은 확인이 되나 getItems() 하면서 list가 false로 출력이 되는것을 알 수 있습니다.

조치 사항

조치중 ...

[dusunax]

해결!

게시글의 좋아요를 나타내는 값은 isLiked입니다.

• 게시글의 좋아요 여부(boolean값)에 따라 좋아요 아이콘을 다르게 랜더링 합니다.
  
• 게시글의 좋아요 여부(boolean값)에 따라 요청을 다르게 보냅니다.
  • 좋아요가 false일 때: patch(/recipes/${recipeId}/like)
  • 좋아요가 true일 때: patch(/recipes/${recipeId}/dislike)
• 좋아요를 눌렀을 때 화면 내에 변화가 생겨야 합니다.
  • 즉 리랜더링을 필요로 합니다.
  • 리랜더링을 일으키기 위해 hook을 사용해야 합니다.

---

조건을 적용할 때 State를 사용

• 좋아요를 누를 수 있는 조건은 isliked 대신 state인 liked를 사용하였습니다.

if (liked === false) {
    try {
      await api(contentType)
        .patch(`/recipes/${recipeId}/like`)
        .then((res) => {
          console.log(res);
        });
      setLiked((prev) => !prev);
    } catch (err) {
      console.log(err);
    }
  } else {
    // liked(isLiked)가 false
    try {
      await api(contentType)
        .patch(`/recipes/${recipeId}/dislike`)
        .then((res) => {
          console.log(res);
        });
      setLiked((prev) => !prev);
    } catch (err) {
      console.log(err);
    }
  }
};

• liked는 isLiked를 초기값으로 선언하였습니다.

const [liked, setLiked] = useState(isLiked);

• 매번 props.getItems();를 사용할 필요가 없기 때문에 삭제하였습니다.