댓글기능을 추가하기 위해 처음 배웠던 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 함수를 넣었다.
야호!
처음 만들었던 프로젝트였던 위스타그램의 댓글 추가기능을 구현했다.
해야지해야지했다가 드디어!
물론 전혀 감이 안잡혀서 구글링도 하고 동기님들 코드도 보면서 했지만 그동안에도 그대로 따라하려고 여러번 시도를 했었는데 구현이 되지 않았다.
그러다가 오늘 마침내😭😭...
그 전에는 한 개의 댓글의 하트를 누르면 다른 댓글의 하트까지 색이 바꼈었는데..
이제는 각각 기능을 한다.
그때는 필터나 특정 값을 지정하지 않아서 그랬었던 것이다.
아무튼 만족만족 초만족.!
이 바탕으로 1차프로젝트도 잘 적용해야겠다.