state

state란?

props는 부모객체로부터 자식객체로 받아오기 때문에 직접수정은 할 수 없다.
그러나 state는 컴포넌트 내에서 값이 변할 수 있다.

state는 컴포넌트 내에서 별도의 상태가 필요할때 사용한다.

state를 어떻게 사용할까?

state를 이용해서 카운터를 세는 간단한 기능을 구현해보겠다.

1. 먼저 counter컴포넌트를 생성하여 카운터를 만든다.

import React, { Conponent } from 'react';
class Counter extends Component {
  render() {
    return (
      <div>
      <h1>카운터</h1> 
      <div>값: 0</div>
      <button>+</button>
      <button>-</button>
      </div>
      );
   }
}

export default Counter;

2. 그후 App.js에 Counter를 등록한다.

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

const App = () => {
  return <Counter  />;        
};

export default App;

이렇게 하면 눌러도 아무것도 작동은 안되지만 카운터 화면이 완성된다.

3. 버튼기능을 활성화 한다.

import React, { Conponent } from 'react';
class Counter extends 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 Counter;

state객체를 만들어준 뒤 number를 만들어 준다.
그 후에 값에는 this.state.number를 써준다.
여기서의 this는 class를 가리키므로 class의 state객체의 number라는 뜻이다.

setState

state의 상태를 업데이트 하고 싶으면 setState를 사용한다.
1. 여기서는 handleDecrease,handleIncrease함수에 this.setState을 설정한후 number의 값을 조정한다.
2. 조정할 값은 state에 있는 number이므로 this.state.number를 써준다.
그 후 onClick이벤트 실행시 handleDecrease,handleIncrease를 실행하도록 해준다.(여기서 위의 함수들은 class에 포함되어 있으므로 this를 써준다.)