All you need to know about State

자 그래서 state는 object자나, 이걸로 뭘 할건데? 

우리는 state안에 변하는 data를 넣는다고 했다. 우선 우리의 코드를 봐보자,

자 우리가 원하고, 하고자 하는 것은 add 버튼을 눌렀을 땐, count가 +1이 되고, minus 버튼을 눌렀을 땐 count가 -1이 되는 것일텐데,  그 말인즉슨 add function이 실행될 때에 this.state.count = 1이 되고(현재 state안의 count = 0이니까) minus function이 실행된다면 this.state.count = -1이 되는 것인가?  코드를 봐보자.

 

사실 이 코드는 옳은 코드가 아니다, 단지 예를 든 것인데, 이렇게 쓰게되면 안되는 이유가 state는 절대 직접 변경하면 안되기 때문이다. 콘솔을 봐보자,

state를 set해라! 직접 state를 변경하지 말라고 되있다. 그러면 왜 동작하지 않을까 ? 우린 state를 변경하고 있지만 state는 동작하지 않는다! 이유는 이런 식으로 작성된 코드는 react는 render function을 refresh하지 않기 때문이다. 이 말의 의미는 매번 state의 상태를 변경할 때 우리는 react가 render function을 호출해서 바꿔주길 원하는다는 말이다. 그 말은 만약 우리가 state.count = 20이라고 하면 나는 다시 render function이 호출되기 원한다는 것인데, 왜냐면 그때까지 Count는 20이 되기 때문임. 하지만 어떻게 우리가 이걸 할 수 있지? 그리고 왜 우리는 "직접 state를 변경하지 마시오"라는 메세지를 받는걸까? 만약에 우리가 setState function을 호출하면, react는 매우 똑똑해서 우리가 언제 setState를 호출할 지를 알고 또한 내가 view를 refresh하길 원하는 걸 알고 render function을 refresh하길 원하는걸 알아. 좋아, 정확히 우리가 원하는 거야, 나는 내 state를 바꾸고 싶지만 또한 react가 어떤 것이든 refresh해주길 원해. 따라서 this.state.count = 1처럼 동작하지 않는 것을 하는 대신에 this.setState라고 해보자. 보다시피 setState는 새로운 State를 취해야해, 그리고 이경우에 나는 새로운 state를 줄거야, 기억해야할건, state는 object야, 따라서 setState는 새로운 state를 받아야하고, react는 충분히 똑똑한데, 만약 너가 setState를 호출하면 react는 state를 refresh하고 또한 render function을 호출할거야. 다시 한번 더, 새로운 state와 함께야. 그래서 react는 다시, render를 다시 실행해 react는 모든 걸 다시 칠하지만, 충분히 똑똑해 그리고 처음에 이야기했던 virtual DOM을 우리가 가지고 있기 때문에 react는 매우 빠르게 변경할 수 있고, 깜박거리지도 않아! 보다시피, react는 state를 업데이트했어. 하지만 또한 render function을 다시 호출하고 있어. 맞아, 이게 우리가 setState를 사용해야하는 이유야. 우리가 setState를 사용하지 않으면 새 state와 함게 render function이 호출되지 않을거야. 이제 내가 할 일은 다음과 같이 코드를 작성해주면 되겠지?

 

참고로... 이건 좋은 코드는 아니다. 왜냐면 우리는 이 state에 의존하고 싶지 않거든, 몇가지 성능 문제가 나중에 있기 때문이야. 다르게 할 수 있는 방법이 있지만 지금은 counter를 이대로 두자. 더 나은 방법을 알려주긴 할게. 

 

add = () => {
	this.setState(current => ({ count: current.count + 1 }));
};

이런식의 코드가 우리가 state를 set할 때, react에서 외부의 상태에 의존하지 않는 가장 좋은 방법이긴 해.  위의 방법은 setState에서 state를 사용하고 있기 때문에 좋은 코드가 아니야. 자 우리가 하고 싶은 것은 우린 현재 state를 얻고 싶고 react는 우리에게 줄거야, 따라서 훨씬 더 나은 새로운 state와 함께 할 수 있어.

자! 이제 보다시피 잘 동작하고 있어. 

잘 기억해두자. 매 순간 우리가 setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출할거야. 

자 다시, 우리가 setState를 호출할 때마다 react는 새로운 state와 함께 다시 render(rerender)할거야. 하지만 이건 우리가 setState를 호출했을 때만 동작할거야, 알겠지 ?