52. "State"와 함께 일하기

변수가 변경되고 코드가 실행되어도 리액트는 신경 쓰지 않는닷~!

일부 변수의 변경이 함수를 다시 실행하게 하지 않는다. 

다시 실행된다고 하더라도 초기 값으로 다시 설정이 되어서 변경된 값이 화면에 노출되지 않을 것이다. 

 

리액트 메모리 어딘가에서 관리되고 setTitle과 같은 함수는 단지 새로운 값만 받는 것이 아니라 호출한 컴포넌트 함수는 이 state를 업데이트 하는 함수이다. 

즉 state를 업데이트할 때 컴포넌트를 다시 호출하고 싶으면 

새로운 값을 할당 + state가 등록된 컴포넌트는 재평가 되어야 함 > 리액트에게 말함

다시 실행하고 jsx 코드를 다시 평가한다. 

 

그런데 위의 함수에서는 Updated! 된 값으로 title 이 바뀌지 않는다.
왜냐하면 state를 업데이트하는 함수를 호출했을 때

사실상 바로 값을 바꾸지 않았기 때문입니다
대신 이 state의 업데이트를 예약한다.

그래서 바로 다음 줄에서는 새로운 값이 아직 사용 가능하지 않다

 

즉 값을 업데이트 하고 그 업데이트 된 값이 화면에 출력되려면 state가 필요하다.
그리고 이렇게 state를 이용해서 실행하면, 컴포넌트만 변경된 값을 가지고 jsx 코드의 재평가가 이루어진다.
=> 해당 컴포넌트만 업데이트가 이루어진다는 점에서 빠르게 화면이 전환된다는 것을 알 수 있다.