React - State

in REACT on React, React


props는 자식 입장에서는 읽기전용이다.

State

state는 내부에서 변경할 수 있다. 자기가 처음부터 들고 있다가 변화를 일으킬 때는 항상 setState라는 함수를 사용한다.

app.js

import React, { Component } from 'react';
import Counter from './Component.js'

class App extends Component {
  render() {
    return (
      <Counter />
    );
  }
}

export default App;

component.js

import React, {Component} from 'react';

class Counter extends Component{

  state = {
    number : 0
  }

  handleIncrease = () => {
    this.setState({
      number: this.state.number +1
    })
  }

  /*
  handleIncrease(){this // this가 뭔지 모르게 된다} 
  이때는 constructor(props){super(props);} 를해줘야 한다.
  */

  handleDecrease = () => {
    this.setState({
      number: this.state.number -1
    })
  }

  render(){
    return(
      <div>
        <h1>카운터
          </h1>
          <div>값: {this.state.number}</div>
          <button onClick={this.handleIncrease}>+</button>
          <button onClick={this.handleDecrease}>-</button>
        </div>
    )

  }

}

export default Counter;

무조건 setState를 사용한다는 것을 명심하자.