React 실습 -6

와우 또 왔군..

가자ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ

 

여기서 이런 말을 하는 사람도 있어!

 

state는 단지 object잔아 ?

이거로 뭘 할 수 있다는거야?

 

예를 들어서, 내가 add를 쓰고 싶을 때, 단지 this.state.count = 1을 할 수 있다는걸 의미 해

minus를 쓰고 싶을 땐, this.state.count = -1

단지 예일 뿐이야! 적용하고 런을 해보자!

 

오잉?

보다시피 동작하지 않지?

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를 받아야하고, 따라서 setstate({count:1})을 하자

이제 동작은 하지!

add를 클릭하면 1로, minus를 클릭하면 -1로!

왜냐면 react는 충분히 똑똑한데 setState를 호출하면

react는 state를 refresh하고 또한 render function을 호출할거야.

 

html이 실제로 어떻게 보이는지 봐봐!

다른건 변함없이 깜빡임 없이 0만 1,-1로 변하지?

레게노레게노!!

 

react는 변화가 있는 부분만 업데이트 해!

그래서 react는 다시 render를 실행하지

react는 모든걸 다시 칠하지만 virtual DOM을 가지고 있기 때문에

매우 빠르게 변경할 수 있고 깜빡임도 없지~

 

보다시피 react는 state를 업데이트 했어!

하지만 또한 render function을 다시 호출하고 있어

 

맞아 이게 우리가 setState를 사용해야 하는 이유야!!

많은 튜토리얼들이 너에게 항상 말하고 있어

 

오~ 너 state를 바꾸고 싶니? 그럼 setState를 사용해!

이렇게 바로 정답을 알려주지..

 

하지만 원리를 이해하지 못하면 아무 소용 없으니까 이렇게 설명해주는거야!

그러니까 왜 setState가 필요한지 이해했으면 해..

 

우리가 setState를 사용하지 않으면 새 state와 함께 render function이 호출되지 않을거야

 

그럼 수정해보자

이제 count를 현재 count에서 1을 더한 값, 뺀값 !

참고로 이건 좋은 코드가 아니야..

왜냐하면 state에 의존하고 있거든!

몇가지 성능 문제가 나중에 있기 때문인데!

 

일단 한가지 방법은!

이건 매우 소수만 아는건데

this.state.count로 하는 대신에 우리는 current를 가져올거야

이렇게 하면 state를 set할 때, react에서 외부의 상태에 의존하지 않는 가장 좋은 방법이야!

 

기억해!

매 순간 너가 setState를 호출 할 때 마다 react는 새로운 state와 함께 render function을 호출할거야!

 

다시한번! 너가 set.state를 호출할때마다 react는 다시 render할거야!

 

새로운 state와 함께 0으로, 1로, 2로, 3으로 0으로 -1로 다시 render할거야! 알겠지?!

하지만 이건 너가 setState를 호출했을 때만 동작할거야!!

 

오케이 여기까지!!

 

다음에 또 보자ㅏㅏㅏㅏ

 

 

출처: nomadcoders.co/