첫 번째 클론 프로젝트이자 작은 팀플을 진행을 해보았던 westagram 작업을 기록해보았다.
addComment함수가 쓰인 부분만 따와서 보자면(중간에 '...' 부분은 다른 코드들이라 생략했다.)
//main.js
{feedData.map(feed => {
return (
<Feed
key={feed.feedId}
feed={feed}
addComment={this.addComment}
toggleLike={this.toggleLike}
/>
);
})}
main.js
에서 피드 부분만 빼와서 Feed
컴포넌트를 이용해 재사용성을 높여주었고 피드를 여러개 만들기 위해 map
을 사용해줬다. 이때 나는 feed 객체 전체를 넘겨주었다.
//Feed.js
<CommentInput feedId={feedId} addComment={addComment} />
그리고 Feed.js
에서도 CommentInput
컴포넌트를 따로 만들어서 연결해주었다.
//CommentInput.js
...
constructor(props) {
super(props);
this.state = {
value: '',
};
}
handleInput = event => {
this.setState({
value: event.target.value,
});
};
reset = () => {
this.setState({
value: '',
});
};
render() {
const { addComment, feedId } = this.props;
const { value } = this.state;
const isButtonActive = value.length > 0;
return (
<form>
<input
className="inputValue"
type="text"
value={value}
onChange={this.handleInput}
placeholder="댓글 달기..."
/>
<button
type="submit"
className="pressPost"
onClick={event => addComment(event, feedId, value, this.reset)}
disabled={isButtonActive ? false : true}
>
게시
</button>
</form>
);
게시 button을 commentInput 컴포넌트로 빼왔고 onClick
event를 실행했을 때 addComment함수가 발생하게 하였다.
그런데❗️ 초기 state값
과 handleInput함수
가 메인에 있으면 세개의 피드 모두에 동시에 값이 쳐지는 문제가 발생하였다. 그래서 이를 해결하기위해 state값과 handleInput함수를 commentInput으로 옮겨주었다.
하지만❗️우리가 알듯이 변화된 state값을 상위에서 하위 컴포넌트로는 전달해줄 수 있지만(props를 이용) 하위에서 상위 컴포넌트로 전달해줄 수 없다.
👉 이를 위해서 addComment의 함수의 인자
를 통해서 전달해주었다.
이는 reset함수를 사용할때도 마찬가지이다.
중간중간에 구조분해할당도 해주었다.
//main.js
addComment = (e, feedId, value, reset) => {
e.preventDefault();
const { feedData } = this.state;
const newObj = {
id: feedData[feedId].commentList.length + 1,
userName: '_ocean_zoo',
content: value,
};
const newComment = feedData.map(feed => {
return feed.feedId === feedId
? { ...feed, commentList: feed.commentList.concat(newObj) }
: feed;
});
this.setState({
feedData: newComment,
});
reset();
};
나는 Feed의 mock data를 가진 FeedData 안에 comment의 mock data를 가진 commentList를 넣어놓았다.
삼항연산자
를 통해서
1) FeedData안의 feedId가 addComment의 매개변수인 feedId와 같다면 그 피드에는 댓글이 추가된 새로운 피드를 반환하게하였고(이때 spread
를 통해 기존의 피드 객체를 풀어주고 concat
을 통해서 새로운 댓글을 더했다)
2) 나머지 feedId가 다른 피드는 기존의 피드를 반환하게 해주었다.
setState
를 통해 state가 새로운 피드가 적용된 데이터로 변하도록 만들어주었고 reset함수
를 통해 addComment가 된 후 input창에 아무것도 없어지도록 만들었다.
//main.js
toggleLike = feedId => {
const { feedData } = this.state;
const newFeedData = feedData.map((feed, index) => {
return feedId === index
? { ...feed, isFeedLike: !feed.isFeedLike }
: feed;
});
this.setState({ feedData: newFeedData });
};
//Feed.js
<i
className={
isFeedLike
? 'fas fa-heart fa-lg heart-red'
: 'far fa-heart fa-lg heart-black'
}
onClick={() => toggleLike(feedId)}
/>
아직 더 구현해보고 싶은 기능이 많지만 팀 프로젝트를 시작해야해서 우선 여기까지 구현하고 작업한 기능들을 복습했다.
모든 프로젝트가 끝나고 시간이 된다면 다른 기능들도 구현해볼 예정이다. 그때 더 추가로 기록을 해야겠다.
선주님!! 첫 프로젝트 고생많았습니다 😂 앞으로 더 고생길만 남았지만 2달 동안 화이팅 해봅시다~~
그리고 오늘 코드 설명 감사했습니다!👊