리액트 댓글기능 구현 (엔터시,버튼 클릭시)

---

import React from "react";
import "./App.css";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      newReply: "",
      replies: [
        {
          text: "",
        },
      ],
    };
  }

  textChange = (e) => {
    this.setState({
      newReply: e.target.value,
    });
  };

  add = () => {
    // Button 요소의 onClick 이벤트 핸들러
    let arr = this.state.replies;
    arr.push({
      text: this.state.newReply,
    });

    this.setState({
      replies: arr,
      newReply: "",
    });
  };
  pressEnter = (e) => {
    if (e.key === "Enter" && this.state.newReply) {
      this.add();
      e.target.value = "";
    }
  };

  render() {
    return (
      <div>
        <div className="App">
          <div>
            <ul className="textbox">
              {this.state.replies.map((el) => (
                <li>{el.text}</li>
              ))}
            </ul>
          </div>
        </div>
        <input
          type="text"
          placeholder="댓글달기..."
          onChange={this.textChange}
          onKeyPress={this.pressEnter}
          value={this.state.newReply}
        />
        <button onClick={this.add}>게시</button>
      </div>
    );
  }
}

export default App;

---

this.state = {
newReply: "",
replies: [
{
text: "",
}]

newReply: "" 인풋에 글을 작성할때 사용 일단 아무것도 없게 ""를 넣어줌
replies: [{text: "",}] newRely에 들어온 값을 replies에 담아준다.

textChange = (e) => {
this.setState({
newReply: e.target.value,
});
};

input에 onChange={this.textChange}를 넣었다
state의 newReply:""를 setState로 인해
작성한 값을 newRely에 벨류값으로 들어오게 만들었다.

add = () => {
// Button 요소의 onClick 이벤트 핸들러
let arr = this.state.replies;
arr.push({
text: this.state.newReply,
});

this.setState({
replies: arr,
newReply: "",
});
};

<button onClick={this.add}>게시</button>
버튼을 눌렀을시 온클릭 이벤트 실행
add에는 arr이라는 변수를 만들어줬다 arr은
replies: [{text: "",}]라는 배열안의
text를 text: this.state.newReply,로 바꾸어 넣어준다.

onChange로 인하여

  this.setState({
    newReply: e.target.value,
  });
};

가 실행되고 newReply은 e.target.value인 상태라서
text: this.state.newReply = e.target.value이 된다.
실행 후 setState로 인하여 textbox에는 arr과 newReply: ""이 실행된다. ""를 사용하는 이유는 댓글을 달고나서 다시 빈공간으로 초기화 해줄려고이다.

pressEnter = (e) => {
if (e.key === "Enter") {
this.add();
e.target.value = "";
}
};

onKeyPress={this.pressEnter} 특정 키값을 눌렀을시 실행
프레스엔터에 만약 키값이 엔터면 add함수를 실행한다
그다음 입력한 벨류값을 ""로 초기화 시켜서 아무것도 없게 만든다.

  render() {
    return (
      <div>
        <div className="App">
          <div>

        <ul className="textbox">
          {this.state.replies.map((el) => (
            <li>{el.text}</li>
          ))}
        </ul>

ul에 replies: [{text: "",},] 배열에 맵을 사용한다.
el은 내가 입력한 값이되고 거기에
<li>{el.text}</li> <li>와 .text 를 넣어서 실행시 ul에 li가 하나씩 추가되서 마치 댓글처럼 보이게 사용할수있다.

      </div>
    </div>
    텍스트<input
      type="text"
      placeholder="댓글달기..."
      onChange={this.textChange}
      onKeyPress={this.pressEnter}
      value={this.state.newReply}
    />
    <button onClick={this.add}>게시</button>
  </div>
);

}
}

export default App;