- 각 리뷰별로 삭제 버튼을 만들어서 클릭했을 때 해당 리뷰가 삭제되어야 합니다.
- 각 리뷰 별로 좋아요 버튼을 만들어서 클릭 했을 때 해당 리뷰만 좋아요 표시가 되어야 합니다. 다시 누르면 좋아요가 취소됩니다.
하트 버튼의 구현은 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
를 활용하여 쉽게 삭제 버튼을 구현할 수 있었다.
이와 같은 다양한 메소드들을 익히는 것이 앞으로 해야할 일이라고 생각된다.