Intro

들어가기 전에 React 댓글 추가 글에서는 컴포넌트를 분리하지 않고 Feed.js에서 댓글을 추가하였는데 이 뒤에 컴포넌트를 분리하는 것이 관리하기 편해질 것 같아 CommentList와 Comment 컴포넌트로 분리하였다.

Feed.js

  <ul className="comment__ul">
    <CommentList
      comments={this.state.comments}
      deleteComment={this.deleteComment}
     />
  </ul>

CommentList.js

• Comment 컴포넌트가 반복적으로 렌더링된다.

class CommentList extends React.Component {
  render() {
    return this.props.comments.map((content) => {
      return (
        <Comment
          key={content.id}
          comments={content}
          commentsArr={this.props.comments}
          deleteComment={this.props.deleteComment}
        />
      );
    });
  }
}

Comment.js

• 실제로 렌더링되는 댓글 구조

class Comment extends React.Component {
  render() {
    return (
      <li className="comment">
        <div className="comment__div">
          <span className="nickname">{this.props.comments.nickname}</span>
          <p>{this.props.comments.comment}</p>
          <button className="more">{this.props.comments.btn}</button>
        </div>
        <div className="like-delete">
          <button className="mini-like-btn">
            <img alt="Heart" className="mini-heart" src="images/heart.png" />
          </button>
          <button
            className="delete-btn"
            onClick={() => this.props.deleteComment(this.props.comments.id)}
          >
            X
          </button>
        </div>
      </li>
    );
  }
}

댓글 삭제 Plan

1. 해당 댓글의 id를 인자로 받아온다
2. 인자로 받아온 id와 state에 댓글을 모아놓은 배열인 comments 안의 id 값이 일치하지 않는값만 filter해서 새로운 배열을 setState한다.

Code

Comment.js

<button
  className="delete-btn"
  onClick={() => this.props.deleteComment(this.props.comments.id)}
>
 X
</button>

• 부모인 Feed.js에서 deleteComment 함수를 만들고 Feed.js->CommentList.js->Comment.js 순으로 props로 전달해줬다.
• 댓글 하나의 id값이 필요하기 때문에 Comment.js에서 인자값으로 this.props.comments.id의 값을 넣어 부모에게 해당 id의 값을 끌어올려준다.

Feed.js

deleteComment = (id) => {
    this.setState({
      comments: this.state.comments.filter((content) => content.id !== id),
    });
  };

• 매개변수 id에는 Comment 컴포넌트에서 얻은 댓글 하나의 id 값이 들어있다.
• 이 id값과 Feed의 state 객체에 들어있는 댓글의 id값과 비교하여 같지 않은 배열의 요소만 골라서 다시 새로운 배열을 setState한다.