[React] State 사용하기

노마드코더 - ReactJS로 영화 웹서비스 만들기

 

 

 

State는 보통 동적 데이터와 함께 작업할 때 만들어진다.

 

 

import React from "react";
import PropTypes from "prop-types";

class App extends React.Component {
  state = {
    count: 0,
  };
  add = () => {
    this.setState((current) => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState((current) => ({
      count: current.count - 1,
    }));
  };
  render() {
    return (
      <div>
        <h1>The number is: {this.state.count}</h1>
        <button onClick={this.add}>Add</button>
        <button onClick={this.minus}>Minus</button>
      </div>
    );
  }
}

export default App;

 

 

매순간 setState()을 호출할 때마다 리액트는 새로운 state와 함께 render함수를 호출한다.

매번 state의 상태를 변경할때 render함수를 호출해 바꿔주는 것이다.