[React] state 업데이트,변경 하기 (setState)

state를 사용할때 state의 값을 바꿔줄때 어떻게 해야할까요

 

이때는

 

setState(state)를 써주면 됩니다.

 

간단히 코드를 통해 알아볼까요

class TestReact extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    }
  }
  render() {
  	return {
      <div>
        <p>숫자 : { this.state.number }</p>
        <button onClick = {() => {
          this.setState({
            number: this.state.number + 1
          })
        }}>+1하기</button>
      </div>    
    }
  }
}

이렇게 사용하게 됩니다.

 

setState의 사용법 어렵지 않죠?

 

!! 주의사항

state값은 무조건 setState로만 값을 변경,업데이트 해주어야합니다.

setState메서드는 파라미터로 전달받은 필드를 업데이트한 후 컴포넌트가 리렌더링하도록 트리거하는 역할을 가지고 있습니다.

setState를 쓰지않는다면 리렌더링이 일어나지않겠죠? 값은 변경되겠지만 렌더링이 되지않으면 값은 변하지 않는것처럼 보일 수 밖에 없죠!