React

ES6

: 리액트는 기본적으로 ES6를 사용한다.

다음의 개념들에 대해 숙지하여야 한다.

• Destructuring
• spread operator
• rest parameters
• default parameters
• template literals
• arrow function
• for-of loop

JSX

:자바스크립트의 확장문법, html과는 차이 있음

주의점
1. 반드시 하나의 엘리먼트로 감싸야한다.
2. 자바스크립트 코드를 적용할 땐 {} 안에 작성한다.
3. JSX 내부에선 if문 사용 불가, (삼항연산자 사용)
4. class가 아닌 className

//1. 3항 연산자 사용
const Hello = () => {
  return (
    <div>
    {1+1 ===2 ? (<div>참</div>):(<div>거짓</div>)
    </div>
  )
}


//2. return 없이도 사용 가능
const Hello = () =>  (
    <div>
    {1+1 ===2 ? (<div>참</div>):(<div>거짓</div>)
    </div>
  )

---

React를 활용하여 간단한 클래스형 트위터 글작성 화면을 만들었다.
서버와 연결하진 않았고 state에 setState로 추가하는 방식이다.
코드는 매우 엉성하고, CSS는 볼품없지만 짧은 시간내에 이정도 했다는 것에 만족한다.

작성한 App.js 전체 내용

import React from 'react';
import './App.css';
import './reset.css';
class App 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.handleClick = this.handleClick.bind(this);
    this.handlechange = this.handlechange.bind(this);
  }

  handleClick(val) {
    let temp = {
      uuid: this.state.tweets.length + 1,
      writer: 'jay',
      date: '2020-12-31',
      content: val,
    };

    this.setState({ tweets: [...this.state.tweets, temp] });
  }

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

  render() {
    return (
      <>
        <h3 className="title">Writer : Jay</h3>
        <div className="write_section">
          <textarea
            className="textbox"
            cols={100}
            rows={10}
            onChange={this.handlechange}
          ></textarea>
          <button
            className="submit_btn"
            onClick={() => this.handleClick(this.state.value)}
          >
            {' '}
            글 작성하기
          </button>
        </div>

        <div className="comment_section">
          <ul className="chats">
            {this.state.tweets.map((ele) => {
              return (
                <Tweet
                  username={ele.writer}
                  comment={ele.content}
                  date={ele.date}
                />
              );
            })}
          </ul>
        </div>
      </>
    );
  }
}

function Tweet(props) {
  return (
    <li className="chat_info">
      <div className="name">{props.username}</div>
      <div className="comment">{props.comment}</div>
      <div className="date">{props.date}</div>
    </li>
  );
}

export default App;

``