리액트의 state

state란?

컴포넌트 자체 내에서 처음부터 값을 갖고있는 것을 말한다
내부에서 변경이 가능하고 변경시에는 setState 함수를 사용한다.


다음은 카운터 버튼을 통해 더하기와 빼기를 실행하는 페이지다.

import React from "react";

class Count extends React.Component{
 state = {
  number :0      
 }

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

 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 Count;

number state를 설정하고 그 안에서 this.setState()를 사용해 state값을 변경시킨다.
위의 경우 화살표함수 방식으로 표현되었고, 화살표 함수를 사용하지 않을 경우 다음과 같이 코드를 적용해도 같은 결과가 나온다.

import React from "react";

class Count extends React.Component{
 state = {
  number :0      
 }

 constructor(props) {
  super(props);
  this.handleIncrease = this.handleIncrease.bind(this);
  this.handleDecrease = this.handleDecrease.bind(this);
 }

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

 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 Count;