댓글 좋아요 및 추천 기능

좋아요 여부에 따라 다른 이미지를 나타내는 기능을 구현해보았다. (좋아요->빨간하트이미지/좋아요x->흰하트이미지)

-> 이를 위해 댓글마다 좋아요 여부를 저장하는 likeState를 만들어 이용했다

 

<과정>

1. 처음 로딩 시 서버에 저장되어있는 상태 불러오기

-> 댓글에 대한 정보를 불러오는 api를 통해 댓글의 좋아요 여부 상태를 받아온 후, 해당 상태를 likeState 객체에 저장. 

(댓글이 여러개이므로 state를 객체로 만들어 이용!)

const [likeState, setLikeState] = useState({});

  useEffect(() => {
    // comments 배열로부터 초기 좋아요 상태 설정
    const initialLikeState = {};
    comments.forEach((comment) => {
      initialLikeState[comment.id] = comment.is_liked;
    });
    setLikeState(initialLikeState);
  }, [comments]);

 

likeState 상태에 따라 보여지는 이미지가 다르도록 삼항연산자로 표현해두고 이를 이용

const heartImage = likeState[comment.id]
          ? "/assets/redHeart.png"
          : "/assets/whiteHeart.png";

<img
src={heartImage}
onClick={() => toggleLike(comment.id)}
className="heart">
</img>

 

2. 하트이미지 클릭 시 변화

-> 좋아요를 의미하는 하트이미지를 클릭한다면, 해당 댓글의 likeState가 바뀌고 그에 따라 보여지는 이미지가 달라지게 하기 + api 호출해서 db의 state도 바꾸기

//댓글 좋아요 누를시 좋아요 state 바뀌고, postGood/deleteGood 실행시켜 서버에 전달해야함
  const toggleLike = async (commentId) => {
    const liked = !likeState[commentId];
    setLikeState((prevState) => ({
      ...prevState,
      [commentId]: liked
    }));
    if (liked) {
      goodVoice(commentId);
    } else deleteGood(commentId);
  };

-> 원래 저장되어있던 상태의 반대를 liked라는 변수에 저장한 후, setLikeState를 통해 likeState 업데이트한다.

업데이트 된 상태가 true, 즉 좋아요가 눌러진 상태면 db에 is_liked값을 true로, 취소하여 false 상태면 db에 false로 저장하도록 서버에 전달하도록 구현