[React.js] setState() / state 값 갱신

setState는 이미 존재하는 state를 바꿔주는 역할을 하는 함수이다.

왜 state를 변경할때는 setState를 해야하는가?

더하기 빼기를 해주는 간단한 원리를 구현 할 때, state를 직접 조작하는 경우 다음과 같이 실행된다.

여기서 빨간색 네모를 보면 경고가 발생한 것을 알 수 있는데, state를 직접 변경하지 말라는 뜻이다.

이게 왜 뜨냐면, state를 단순히 바꾼다고 해서 렌더링이 다시 되지는 않기 때문이다.

즉, state의 값을 그냥 바꿔주어도, 렌더링이 다시 되지는 않으니, 웹의 값이 바뀌지는 않게 되는 것이다.

 

따라서 state의 값을 변경하고 싶을 때는 setState()함수를 이용하여 값을 바꿔주어야한다.

setState() 사용 1

 

위와 같이 setState를 사용하게 되면, state를 바꿔줄 수 있다.

다만 여기서 명심해야 하는 것은, setState가 state내의 어떤 값을 바꿔주는 것이 아니라 state를 통째로 바꾸는 것이다.

자동차 부품을 교체하듯, 아예 state부분을 갈아낀다고 생각하면 쉬울 것 같다.

따라서 함수 내에 들어가야하는 매개변수는 새로운 state 그 자체 이다. 

다만 위와 같이 state에 접근하는 방식은 성능 저하를 일으킬 수 있다고 하니, 아래와 같은 방식으로 구현해야한다.

setState() 사용 2

보면, this.setState() 내에서 current => ({count: current.count+1)} 과 같은 방식으로 사용해주었다. 

정확히 둘의 성능차이가 어떤지는 아직 잘 모르지만, 일단 따라가 보아야 할 것 같다.