인스타그램 클론 코딩 컴포넌트를 나누던 중, 자식에서 setSate를 해야 할 일이 생겼다! setState는 state가 관리 되고 있는 곳에서 써야하는데,,, 어쩌지? 바로 구글링! 🔥

1️⃣ 자식 컴포넌트 함수 분리

기존 자식컴포넌트 함수

commentAdd = e => {
    e.preventDefault();
    if (e.target.comment.value === '') {
      alert('댓글을 입력해주세요!');
      return;
    }
    const _comments = this.props.commentData.concat({
      id: this.props.userId,
      txt: e.target.comment.value,
      likeHeartBtn: false,
      key: this.props.keyData,
    });
    this.commentKey = this.commentKey + 1;
    this.setState({
      comments: _comments,
      commentBtn: true,
    });
    e.target.comment.value = '';
  };

여기서...!! setState 선언 부분만 쏙! 빼서 부모 컴포넌트로 선언한다

2️⃣ 부모 컴포넌트 함수 작성

부모컴포넌트 함수 추가

bringState = _comments => {
    this.commentKey = this.commentKey + 1;
    this.setState({
      comments: _comments,
      commentBtn: true,
    });
  };

부모 컴포넌트에 있는 setState를 하는 함수를 props로 부모 컴포넌트에 전달해준다

3️⃣ 부모 컴포넌트 함수 자식 컴포넌트에게 전달

<CommentInput
  commentData={this.state.comments}
  btnState={this.state.commentBtn}
  keyData={this.commentKey}
  onSubmit={this.bringState}
  handleButtonState={this.handleButtonState}
  userId={this.props.userId}
  commentKey={this.commentKey}
/>

onSubmit={this.bringState} 로 자식 컴포넌트에게 setState함수를 저달하였다

4️⃣ 자식 컴포넌트 함수 수정

commentAdd = e => {
    e.preventDefault();
    if (e.target.comment.value === '') {
      alert('댓글을 입력해주세요!');
      return;
    }
    const _comments = this.props.commentData.concat({
      id: this.props.userId,
      txt: e.target.comment.value,
      likeHeartBtn: false,
      key: this.props.keyData,
    });
    this.props.onSubmit(_comments);
    e.target.comment.value = '';
  };

this.props.onSubmit(_comments);로 setState를 하는 시점에 함수를 호출하여 setState를 실행시켜주었다!

📌 TMI

props와 state개념을 확실하게 알지못하면 이해하기 힘든 개념이라고 생각한다 🥺 그래도 방법을 찾은 뒤 혼자 코드를 구현하는거 보면 어느정도 이해는 한 것 같다 ㅎㅎ! 리액트 플젝은 처음이라 아직 컴포넌트의 기준이 명확히 세워지지 못해 엉망이다.. 이렇게 시행착오를 겪어가며 성장해 나가는거겠지 💫