[TIL] react 로 댓글기능구현하기

리액트를 처음 배워보면서 이해하는데 시간을 많이 투자해야 했다.

import React, { Component } from "react;

이 문장으로 리액트에서 Component 를 생성할 수 있게 해준다.

class Test extends Component {
  render() {
    return (👇);
  }
}

해당 괄호 안의 내용이 화면에 표시될 내용이다.

class Test extends Component {
  constructor() {
  super();
    this.state = {
      value: "",
    }
  }

  render() {
    return ();
  }
}

constructor 안에서 component 의 상태(state)를 저장해 둘 수 있다. 그때그댸 setState() 메서드로 값을 변경할 수 있다.

render() {
  return (
    <div>
      <input type="text" </>
      <button>submit</button>
      <ul>
        <li>hello</li>
      </ul> 
    </div>
  );
}

학습을 하기 위해 간단하게 댓글을 입력할 input 태그와 버튼, 그리고 댓글을 구현할 ul 태그를 화면에 띄웠다.

먼저 input 태그에 댓글이라는 값(value)을 입력하면 그 값을 가져올 수 있어야 한다. 그 후 state 의 value 를 업데이트 시켜줄 것이다.

<input onChange={this.getValue} type="text" />

👇

getValue = (event) => {
  this.setState({
    value: event.target.value,
  })	
}

input 태그에 onChange 이벤트가 발생하면 getValue 라는 메서드가 실행되는데 onChange 라는 event 그 자체를 인자로 받은 후 이벤트가 발생한 지점의 value 를 state 에 담는다.

이렇게 하면 입력한 값을 사용할 수 있다. 확인해 보고 싶다면 console.log(this.state.value) 를 render() 안에서 작성하여 확인해 볼 수 있다.

console.log 를 getValue 메서드 안에서 작성할 수도 있지만 render() 안에서 하는 이유를 알고 싶다면 동기와 비동기 에 대해서 공부해 보는게 좋다.

이제 input 에 입력한 값을 알 수 있으니, 버튼을 클릭하면 댓글창(li) 에 추가할 수 있어야 한다. 그렇게 하기 위해서 원래 state 에 commentList 라는 key 에 빈 배열을 배치해 주었다.

constructor() {
  super();
    this.state = {
      value: "",
      commentList: [],
    }
}

👇

<button onClick={this.addComment}>submit</button>

👇

addComment = () => {
  this.setState({
    commentList: this.state.commentList.concat([this.state.value]),
    value: "",
  })	
}

이렇게 하면 버튼을 클릭해서 onClick 이벤트가 발생하여 addComment 메서드가 실행된다. 이때 setState() 메서드로 인해 기존의 state 의 commentList 라는 key 의 값은, 빈 배열에 입력한 값을 담은 배열을 붙인(concat) 결과가 된다.

그리고 addComment 메서드는 commentList 와 동시에 value 또한 빈 문자열로 다시 setState 하고 있다. 이 부분은 댓글이 입력된 후 입력한 값이 input 에 남아있지 않도록 할 때 사용할 것이다.

이제 댓글을 추가할 위치에서 댓글이 추가되는 로직을 작성해야 할 차례다.

<ul>
  <li>hello</li>
    {this.state.commentList.map((comm, idx) => {
      return <li key={idx}>{comm}</li>
    })}
</ul>

map() 함수는 배열 안을 돌면서 콜백 함수를 인자로 받아 어떠한 함수처리를 해준 후 새로운 배열을 return 한다. 여기서 comm 은 입력한 값이고, 두번째 인자로는 배열의 index 가 들어온다.
key={idx} 부분은 작성하기 않을 시 아래와 같은 경고가 뜬다.

조금 더 자세히 공부해 보기 전까지는 결과를 조금더 안정적으로 출력하기 위해 작성하는 것이라고 생각하자. 그리고 key 값은 조금 특별한 값이 와야 하는 데 현재 로직의 경우 학습을 목표로 하는 것이기에 배열상에서 특별하다고 해야 하는 값은 index 밖에 없다고 판단된다. 실제로는 key 값으로 index 를 사용하는 경우는 최후의 수단으로 한다.

리액트에서 Component 는 재사용 가능한 ui 이기 때문에 <li></li> 안의 내용을 component 파일로 분리하여 관리할 수도 있을 것이다.

추가적으로 버튼을 클릭하여 입력하는 경우보다는 input 에서 입력한 후 Enter 버튼을 사용하는 경우가 많다.

이것을 가능하게 하기 위해서는 간단한 코드를 추가하기만 하면 된다.

<input onKeyPress={this.addCommEnter} />

👇

addCommEnter = () => {
  if(e.key === "Enter"){
    this.addComment();
  }
}