React- Westagram 기록

oceanzoo·2021년 6월 5일
1
post-thumbnail

첫 번째 클론 프로젝트이자 작은 팀플을 진행을 해보았던 westagram 작업을 기록해보았다.

나의 결과물

내가 구현한 기능

  • 댓글들 피드별로 3개,피드3개 만들기
  • 피드 좋아요 기능
  • 댓글 게시(+ enter)
  • 추후에 가능하다면 추가할 예정

기억하고 싶은 코드

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창에 아무것도 없어지도록 만들었다.


addComment함수는 `좋아요 버튼 토글 함수`에서도 똑같이 적용되었다.
//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)}
/>

아직 더 구현해보고 싶은 기능이 많지만 팀 프로젝트를 시작해야해서 우선 여기까지 구현하고 작업한 기능들을 복습했다.
모든 프로젝트가 끝나고 시간이 된다면 다른 기능들도 구현해볼 예정이다. 그때 더 추가로 기록을 해야겠다.

profile
준비된 개발자를 위한 날갯짓 🦋

1개의 댓글

comment-user-thumbnail
2021년 6월 6일

선주님!! 첫 프로젝트 고생많았습니다 😂 앞으로 더 고생길만 남았지만 2달 동안 화이팅 해봅시다~~
그리고 오늘 코드 설명 감사했습니다!👊

답글 달기