react2

1. 리액트로 트위틀러 만들기

  • 아니 갑자기 과제 난이도가 너무 올라간거 아냐…? 너무 어려웠다.
// 기본셋팅값
this.state ={
      tweets: [
        {
          uuid: 1,
          writer: "김코딩",
          date: "2020-10-10",
          content: "안녕 리액트"
        },
        {
          uuid: 2,
          writer: "박해커",
          date: "2020-10-12",
          content: "좋아 코드스테이츠!"
        }
      ]
  • class 형으로 컴포넌트를 만들 경우 , constructor(props), super(props)를 해준다.
  • 그리고 constructor 안에서 this.state 를 정의해준다.
  • 트위틀러 추가되는 부분에 빈문자열 변수 선언하기
  • 컴포넌트 안에 이벤트 연결시 bind(this) 로 묶어두기
this.addNewTweet = this.addNewTweet.bind(this)
  • 이벤트 메소드 인자’e’로 받아서, this.setState 로 상태 업데이트 해주기
  • 인자 안에는 props 가 담겨있다.
  • render() {return} 안에다가 출력하고싶은 html 쓰고, 이벤트 걸고싶은 구역에 onChange, onClick 설정
  • 새로 입력된 트윗을 포함해서 렌더링 해주기. 여기서 key 값을 설정해줘야지 오류가 나지 않는다.
      <ul id="tweets">
        {this.state.tweets.map((tweet)=>
        <SingleTweet key={tweet.uuid} writer={tweet.writer} date={tweet.date}>{tweet.content}
        </SingleTweet>
        )}
      </ul>
  • SingleTweet 컴포넌트에 tweets의 요소 하나하나씩 넘기기 때문에 아래와 같이 인자를 받을 수 있다.
function SingleTweet ({writer, date,children, tweets}) {
  return (
  <ul >
    <div>{writer}</div>
    <div>{date}</div>
    <div>{children}</div>
  </ul>
  )}
  • Dom에 렌더링할 컴포넌트 export 해주기
//App.js
export default Twittler;

//index.js
import Twittler from './App';
import React from 'react';
import ReactDom from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <Twittler />
  </React.StrictMode>,
  document.getElementById('root')
);

Updated: