react, 올바르게 사용해본다. "prevState"

react에서 state는 immutable하게 쓰여야 한다고 얘기한다.

이것은 무슨말인가.

간단한 예시를 통해 쉽게 확인해보자

 

state={ lucky_number: 7, };

이와같이 state가 설정되어 있을떄

this.state.lucky.number = 4

혹은

this.state.lucky_number += -3

과 같이 값에 변화를 주는 행위를 하면 안된다는 말이다.

그렇다면 lucky_number의 값을 바꿔주려면 어떻게 해야할까 ?

this.setState({})를 통해 새로 값을 업데이트 해줘야한다.

 

this.setState({ lucky_number: 4});

or

this.setState(prevState => ({

  lucky_number: prevState + 3

}});

이러한 방식이 react에서 제시하는 올바른 state 관리라고 할 수 있다.

 

그렇다면 state중 object가 있다면 어떨까

state={

  firend: {

    phone: 99,

    age: 12,

    birth: 0011-02-02

  }

};

이런 상황에서 prevState를 통해 phone넘버를 정상적으로 갱신해주고 싶다면?

this.setState(prevState => ({

  friend: {

    ...prevState.friend, // 혹은, ...this.state.friend

    phone: 010-0000-1111

  }

}));