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;
'React > react 기초 공부하기' 카테고리의 다른 글
react styled-components 사용해보기 (0) | 2020.06.16 |
---|---|
redux 공부 하기(순수 리덕스만 사용해보기) (0) | 2020.06.14 |
useEffect + axios를 활용하여 API 호출하기 (0) | 2020.06.13 |
react setState와 useState 비교하기 (0) | 2020.05.18 |
React LifeCycle (0) | 2020.05.18 |