react setState

this.setState를 활용하여 state내 내용을 바꿔준다

 

vue와 다른점이 있다면 vue는

data() {
    return {
      heart: require("../../assets/heart.png"),
      fillHeart: require("../../assets/fillHeart.png"),
      recentDatas: []
    };
  },

해당방식으로 선언하여 

this.recenDatas = "넣을값" 방식으로 바로 값을 대입해주는 반면

 

react는 setState를 활용해서 값을 대입해주고 또한 두번째 인자로 콜백함수로 받아오는 다른점이 있었다.

 

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date(),
      front: "react",
    };
  }
  componentDidMount() {
    this.tick();
    //해당 상황처럼 기존 상태를 가져올수도있다
    this.setState({ front: "react.js" }, () => {
      console.log(this.state.front);
    });
  }

  tick() {
    //setState는 비동기함수이며 완료를 콜백으로 받는다
    this.setState({ time: new Date() }, () => {});
  }

  componentDidUpdate() {
    //UI업데이트 이후 추가적인 액션
  }
  render() {
    const { time } = this.state;
    return <div>{time.toLocaleDateString()}</div>;
  }
}
export default App;