[Mission 7-8] 커피 상세 페이지 리뷰 삭제, 좋아요 버튼 기능 구현하기

• 각 리뷰별로 삭제 버튼을 만들어서 클릭했을 때 해당 리뷰가 삭제되어야 합니다.
• 각 리뷰 별로 좋아요 버튼을 만들어서 클릭 했을 때 해당 리뷰만 좋아요 표시가 되어야 합니다. 다시 누르면 좋아요가 취소됩니다.

⭐️ My Thoughts

하트 버튼의 구현은 6단계와 마찬가지로 동일하게 하면 된다. 삭제 버튼은 이전 Clone Coding에서와 마찬가지로 기능만 구현해준 후 Component를 통해 제각각 기능을 구현하게 해주면 되기에 손쉽게 가능하다.

📲 구현 코드

=> useState 를 활용한 하트 버튼의 기능

    const [heartshape, heartshapeChange] = useState(regularHeart);
    function click() { // 클릭시 모양 변경
        if (heartshape === regularHeart) {
            heartshapeChange(solidHeart);
        }
        else {
            heartshapeChange(regularHeart);
        }
    }

기존 Component의 하트에 해당 기능을 추가해준다.

=> SingleComment.js (추가될 댓글의 Component 데이터)

import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart as regularHeart } from "@fortawesome/free-regular-svg-icons";
import { faHeart as solidHeart } from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";

function SingleComment(props) {
    const [heartshape, heartshapeChange] = useState(regularHeart);
    function click() {
        if (heartshape === regularHeart) {
            heartshapeChange(solidHeart);
        }
        else {
            heartshapeChange(regularHeart);
        }
    } // 하트 버튼의 기능 구현을 위한 함수 (useState 활용)

    return (
        <div className="comment">
            <div class="longment">
                <span className="id">{props.id}</span>
                <span className="ment">{props.e}
                </span>
            </div>
            <div class="longment-button">
                <button className="deletebutton" onClick={(e) => { e.target.parentElement.parentElement.remove(); }}>삭제</button>
              // onClick 메소드를 통해 타겟 부모의 부모 태그(하나의 댓글) 삭제
                <a href="#" className="commentheart" id={props.index}>
                    <FontAwesomeIcon
                        icon={heartshape}
                        onClick={click} // 하트 클릭시 모양이 바뀌는 function으로 모양 변경
                    />
                </a>
            </div>
        </div >
    )
}

export default SingleComment;

하트 버튼은 이미 구현을 할 줄 알았기에, 삭제를 하는 메소드를 사용하기만 하면 풀 수있는 가벼운 마지막 단계였다. 이외에 것들은 모두 구현이 완료된 상태였기에 Component만 수정하다면 가볍게 해결할 수 있었다.

⛳️ 구현 화면

🐳 느낀 점

React의 Component를 활용하여 쉽게 구현할 수 있었다. 이전 단계(6단계)에서 사용한 기능만 쓸 줄 안다면 쉽게 구현할 수 있었기에 큰 문제 없이 구현할 수 있었다.
삭제 버튼은 parentElement를 활용하여 쉽게 삭제 버튼을 구현할 수 있었다.
이와 같은 다양한 메소드들을 익히는 것이 앞으로 해야할 일이라고 생각된다.