[React] e.preventDefault();

🪓 수정 전 코드

writeComment = e => {
  this.setState({
    comment: e.target.value,
  });
};

addComment = e => {
 ⭐️ e.preventDefault();
    const { commentList, comment } = this.state;
    this.setState({
      commentList: [
        ...commentList,
        {
          id: commentList.length + 1,
          userName: 'zzz_yk',
          content: comment,
        },
      ],
      comment: '',
    });
  };

  enterKey = e => {
    if (e.key === 'Enter') {
      this.addComment();
    }
  };

<div className="reply">
  <input
    type="text"
    id="input"
    value={comment}
    placeholder="댓글 달기..."
    onChange={this.writeComment}
    onKeyPress={this.enterKey}
  />
  <button
    type="button"
    className="reply-btn"
    onClick={this.addComment}
  >
  게시
  </button>
</div>

 

 

이렇게 하고 댓글을 쓰고 Enter를 치면!!

이런 메세지가 뜬다!!!ㅠㅠ

 

 

그래서 <input>에 onkeyPress를 없애고 input 태그를 <form> 태그로 감싸주었다!

 

🔥 e.preventDefault()로 submit 이벤트 발생시 reload 안하기 html에서 a 태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나, form 안에 input 등을 전송하는 동작이 있는데 e.preventDefault()는 그 동작을 중지시키는 역할을 한다. <input> 또는 <button> 클릭 이벤트가 발생했을 때 페이지가 reload 되는데, 그 현상을 막아줌!!! 참고👉🏻 event.preventDefault

 

 

 

🪓 수정 후 코드

writeComment = e => {
  this.setState({
    comment: e.target.value,
  });
};

addComment = e => {
  e.preventDefault();
  const { commentList, comment } = this.state;
  this.setState({
    commentList: [
      ...commentList,
      {
        id: commentList.length + 1,
        userName: 'zzz_yk',
        content: comment,
      },
    ],
    comment: '',   
  });
};

  // enterKey = e => {
  //   if (e.key === 'Enter') {
  //     this.addComment();
  //   }
  // };

<div className="reply">
  <form onSubmit={this.addComment}>
    <input
      type="text"
      id="input"
      value={comment}
      placeholder="댓글 달기..."
      onChange={this.writeComment}
    />
  </form>
  <button
    type="button"
    className="reply-btn"
    onClick={this.addComment}
  >
  게시
  </button>
</div>

저 preventDefault(); 가 없으면... 댓글을 입력하면 바로 reload가 되버림!!!
잘 나오는구만...흐흐흐