React - 댓글 좋아요 클릭 오류

군밤먹으면서코딩·2021년 6월 28일
0

React

목록 보기
6/8
post-thumbnail

❗️문제 발생

  • 댓글의 좋아요 클릭시 모든 좋아요 상태가 바뀌어버림
  • 각 댓글들의 idx값을 알아와야 하는데 계속 헛손질만 하면서 시간을 날려버림 ...ㅠ

접근 방식

  • spred 연산자(...)를 만들어 기존의 replys를 복사.

  • deleteReply() 함수 처럼 수정할 부분만 수정한 객체를 갈아끼워준다!(isLiked만 검사!)

  • 해당 index는 자식 컴포넌트인 Reply.js 에서 넘겨주면 손쉽게 가져올 수 있다.
    ( 요 부분 때문에 온갖 삽질을 하고 멘탈도 흔들렸다 ㅠㅠ 이렇게 쉬운거얼🤬)

  addReply = e => {
    const { replys, content } = this.state;

    this.setState({
      replys: [
        ...replys,
        {
          id: replys.length + 1,
          userName: 'yongyong04',
          content: content,
          isLiked: false,
        },
      ],
    });
  };
  • 댓글 생성 버튼을 눌렀을 때 state 상태를 바꿔주는 코드이다.
  • spred 연산자가 역시 매우 유용하게 사용되는 것을 알 수 있었다.
 componentDidMount() {
    fetch('http://localhost:3000/data/replyData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({ replys: data });
      });
  }
  • 아직 벡엔드와 연동되지 않아 MOCK 데이터를 사용해 보았다.

  • 비동기 처리도 본격적인 프로젝트가 시작되기 전에 더 많이 사용해 보고 익숙해져야 겠다.

    clickHeart = id => {
      const replys = [...this.state.replys];
    
      replys.filter(ele => {
        if (ele.id === id) {
          replys[id - 1].isLiked = !replys[id - 1].isLiked;
        }
      });
      this.setState({ replys: replys });
    };
  • click시 하트의 색상이 변화되는 함수이다.

  • 가장 시간을 오래 허비한 부분.. index값을 가져오는 것과 isLiked 라는 state를 따로 빼는 것에 너무 집착했던 것 같다.

  • 그냥 기존의 배열을 복사하고, isLiked 부분만 수정한 뒤에 덮어씌워주기만 하면 되는 것이였다!!🥶

 <FontAwesomeIcon
       className={this.props.isLiked ? 'heartActive' : 'heart'}
       icon={redheart}
        onClick={() => this.props.clickHeart(this.props.replyIdx)}
  />
  • map() 함수를 통해 속성값들을 넘겨 준 뒤에 Reply 컴포넌트에서의 하트 이모티콘 부분이다.

  • 여기서 onclick() 시에 Feed 컴포넌트에서 보내준 replyIdx를 인자로 전달해 클릭할 당시 나타나는 id 값을 확인할 수 있다!! ( bind해서 어렵게 어렵게 알아낼 필요가 없었다...)

    정리

    처음 바닐라 js로 시작했던 인스타그램 클론 프로젝트를 React로 바꿔주는 작업도 이제 거의 마무리 단계가 다가오고 있다. 지금 내가 겪은 문제점들은 state, props에 대한 숙련도가 떨어져서 나타나는 문제들이다. 막혔던 부분들은 반복해서 확인하고 다음에는 스무스하게 넘어가쟈고오~💪

0개의 댓글