[1차 프로젝트] Westagram clone -[댓글기능 추가구현]

🛎 댓글기능 추가구현

댓글기능을 추가하기 위해 처음 배웠던 react classfuntion 과 scss 다시 적용!
구조가 바뀌면서 파일이 추가되서 css 수정

▶︎ 댓글좋아요구현

---

부모컴포넌트

    this.state = {
      commentBox: [],
      comment: '',
      isLiked: false,
    };
// 값이 변경되는 것들

  handleLiked = id => {
    this.setState({
      commentBox: this.state.commentBox.map(el =>
        el.id === id ? { ...el, isLiked: !el.isLiked } : el
// setState를 통해 state의 값을 변경.
// 삼항연산자를 이용하여 각 댓글 id의 일치여부에 따라 하트를 눌렀을 때 상태변경
      ),
    });
  };

---

자식컴포넌트

  changeHeartColor = () => {
    this.props.handleLiked(this.props.id);
  };
// props로 받아온 함수에 comment의 id를 파라미터에 넣는다.

   <i className={isLiked ? 'fas fa-heart changedColor' : 'far fa-heart'}
      onClick={this.changeHeartColor}
    />
// className에 삼항연산자를 적용하였고, onClick 적용!

---

---

▶︎ 댓글삭제구현

---

부모컴포넌트

  deleteComment = id => {
    const { commentBox } = this.state;
    const deletedCommentList = commentBox.filter(item => item.id !== id);
    this.setState({ commentBox: deletedCommentList });
  };
// 각 댓글이 삭제되도록 함수를 만들었다.
// filter함수를 통해 commentBox의 id가 아닌 것만 걸러내어 commentBox의 값이 setState를 통해 바뀌도록 적용했다.

---

자식컴포넌트

  handleRemoveComment = () => {
    this.props.deleteComment(this.props.id);
  };
// props로 받아온 함수에 comment.id를 파라미터에 넣었다.
// id 값이 중복되지 않기 때문에 id 값으로 지정

   <i className="fas fa-times" onClick={this.handleRemoveComment} />
 // classfunction return 안에 해당 삭제아이콘을 클릭하면 삭제되도록 onClick 이벤트에 hadleRemoveComment 함수를 넣었다.

---

---

---

---

🙋🏻‍♀️ Today,

야호!
처음 만들었던 프로젝트였던 위스타그램의 댓글 추가기능을 구현했다.
해야지해야지했다가 드디어!
물론 전혀 감이 안잡혀서 구글링도 하고 동기님들 코드도 보면서 했지만 그동안에도 그대로 따라하려고 여러번 시도를 했었는데 구현이 되지 않았다.

그러다가 오늘 마침내😭😭...
그 전에는 한 개의 댓글의 하트를 누르면 다른 댓글의 하트까지 색이 바꼈었는데..
이제는 각각 기능을 한다.
그때는 필터나 특정 값을 지정하지 않아서 그랬었던 것이다.

아무튼 만족만족 초만족.!
이 바탕으로 1차프로젝트도 잘 적용해야겠다.