[React] Class Comp3 | setState 함수 통과시키기

이 전 포스트에서

change name 버튼을 눌렀을 때

firstName, lastName 으로 나뉘어

이름을 변경하는 것을 해보았다.

 

 

Change Name 버튼 클릭을 했을 때 

 

 

이름을 바뀌는 것을 볼 수 있었다.

 

 

콘솔에서 state를 살펴보면 

 

 

 

무슨 이유에선지 바뀐 이름 Lia Lee가 나오는 것이 아니라 

기존 이름 Jane Kim이 그대로 있는 것을 볼 수 있다.

 

---

setState에 함수 패스 시키는 이유

보통 자바스크립트 코드는 기본적으로 synchronous로 일어난다.

이 말은 코드가 한 줄 한 줄 위에서 부터 실행이 된다는 의미이다.

 

하지만 setState는 콜을 받아 컴포넌트들을 다시 랜더할 때 

shallow merge가 asynchronously 일어난다. 

 

그래서 원래는 state가 업데이트 되고 나서 

console.log가 실행이 되는 순서이지만

console.log에는 새 값이 아닌 이 전 값을 가지고 있는 것을 볼 수 있다. 

 

이유는

앱이 복잡해지면 하나의 state에 여러 컴포넌트들을 업데이트 해야하는 경우들이 생긴다.

그런 경우를 대비해 리액트 batch들이 하나에 하나씩 바로 바로 업데이트 하도록 되어있지 않고 

리랜더를 하기 전 최적의 전략을 찾아보고 나서 나중에 리렌더를 하게 설계 되었다. 

그래서 non synchronous call 즉 asynchronous call이 된다. 

 

그래서 console.log에 있는 값으로 업데이트 됐을 수도 있고, 안됐을 수도 있게 된다. 

사실상 업데이트 되지 않은 값이 들어있을 확율이 높다. 

 

그럼 확실히 업데이트 된 값을 받으려면 어떻게 해야할까?

이 경우 setState안에 오브젝트를 pass 시키지 말고 함수를 패스 시키면 된다. 

 

 

---

 

setState에 함수 통과 시키기 

 

setState() 안에 함수를 패스 시켜 바로 렌더가 일어나도록 해보자.

setState() 함수는 함수와 콜백 함수를 pass 시킬 수 있다.

 

첫 번째 함수는 어떤 내용으로 업데이트 할 지 적어 놓은 함수이다.

      파라미터로 state, props 받을 수 있다.

this.setState((state, props) => {}, ()=>{})

state는 현재 state이고 this.state와 같다.

함수 안의 내용이 previous value를 담고 있는 경우 state를 통과시켜 사용할 수 있다.

 

두 번째 함수는 optional이다. 콜백으로 console.log() 넣어준다.

콜백 함수는 앞으로 내용이 실행되었을 때만 실행이 된다.

 

 

 

콘솔에 바로 바뀐 내용이 나오는 것을 볼 수있다.