[TIL][React] 컴포넌트 활용 코멘트 앱 구현

React.js 의

Component, State, props 등의 기본적인 개념들을 이용하여
아주 간단한 코멘트를 작성할수 있는 웹앱을 구현해 보았다.
해당 작업을 Vanila JS와 DOM조작 만으로 구현했던 지식이 자꾸만 떠올라서
쉽게 React방식에 적응하지 못했던것 같다. 서버 및 DB는 없는 껍데기 뿐인 클라이언트지만 생각보다 쉽게 빠르게 구현하진 못하였다.

---

다음과 같이 간단한 코멘트를 작성할수 있는 웹앱이다. 상단의
textarea의 value에 변화가 일어날 때 마다 핸들링하여
가장 <Twittler> 컴포넌트의 state.value 값을 변경해 준다.
버튼을 클릭 시 이벤트가 발생해, 클릭 당시의 state.value 값으로 새로운
코멘트 컴포넌트인<SingleTweet>을 생성해 준다.

---

Code

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

class Twittler extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tweets: [
        {
          uuid: 1,
          writer: "김코딩",
          date: "2020-10-10",
          content: "안녕 리액트"
        },
        {
          uuid: 2,
          writer: "박해커",
          date: "2020-10-12",
          content: "죽여...줘"
        }
      ],
      value: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

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

  handleClick(val) {
    let newTweet = {
      uuid: this.state.tweets.length + 1,
      writer: '김코딩',
      date: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`,
      content: val
    };
    this.setState({tweets: [...this.state.tweets, newTweet]})
    this.setState({value: ''});
  }
  
  render() {
    return (
      <div>
        <Writer />
        <div id="writing-area">
          <textarea id="new-tweet-content" value={this.state.value} onChange={this.handleChange} placeholder="바른말 고운말"></textarea>
          <button id="submit-new-tweet" onClick={() => this.handleClick(this.state.value)}>
            트윗 작성하기
          </button>
        </div>
        <ul id="tweets"> 
          {this.state.tweets.map(json => {
            <SingleTweet key={json.content} writer={json.writer} date={json.date} content={json.content}/>
          })} 
        </ul>
      </div>
    )
  }
}

function SingleTweet({writer, date, content}) {
  return(
    <li className="singleTweet">
      <div>{writer}</div>
      <div>{date}</div>
      <div>{content}</div>
    </li>
  );
}

function Writer() {
  return (
    <div id="writer">작성자: 김코딩</div>
  )
}

function App() {
  return (
    <Twittler />
  );
}

export default App;

이렇게 보고 나니 정말 못생기고 끔찍하게 작성한것 같다. 앞으로는 코드 가독성에
좀 더 신경을 써야할것 같다...