안녕하세요 선생님 토이프로젝트 질문이 있습니다.

[심성보]

경기기록을 남길 수 있는 프로젝트를 제작중입니다.
onUpdateMatch 함수안에서 질문이 있습니다.

제가 원하는건 클릭 시 데이터를 수정하고, 
setData() 함수를 통해서 성공한 data를
넣어서 state변경과 동시에,

modal 창이 내려가서 업데이트 된(재랜더링이 된) 화면을 만들고 싶습니다..

사진 속 코드상 79번 , 81번 에 주석에 적어놓은것 처럼 데이터를 담아도 변경이 되지않는데 
지속적인 삽질로 선생님께 질문드립니다...

[codingapple]

state변경함수는 늦게 처리됩니다 
자바스크립트는 늦게처리되는 함수는 제껴두고 바로 다음줄부터 실행하려고 합니다

[심성보]

선생님 답변 감사합니다.

콘솔에 찍히는 동작이 어떻게 비동기적으로 동작하는지 이해했습니다.

한 가지 추가로 질문이 있습니다. 재랜더링 관련해서 질문이 있습니다. (문제는 해결함)
하지만 왜 이렇게 동작하는지 이해를 못하고 있습니다.

질문입니다.
.then(res => {
  const newData = res.data
  setData(newData)
  onsetInsertToggle()

}) // 처음에는 해당 코드로 then부분을 작성했습니다.

이렇게 작성하면 토글버튼이 false로 바뀌고 화면에 띄어둔 것들이 재 랜더링이 될줄 알았지만 
새로고침을 해야지 바뀐 데이터가 동작했습니다.

두번째 (해결코드)
 	.then(res => {
		const newData = Object.assign(data,res.data)
		setData(newData)
		onSetInsertToggle()
	})

위 두번째 코드에서는 제가 원하는대로 토글이 내려가면 새롭게 업데이트 된 화면이 랜더링이 됐습니다.

state변경함수는 기존은 데이터와 업데이트된 데이터를 비교해 최종적으로 변경된 부분이 있으면
Dom에 적용하는 것을 이해하고 있습니다.

저는 위의 두가지 예시가 똑같이 동작할거라고 생각하는데 그러지 않은 이유를 도저히 모르겠습니다ㅜㅜ
도와주세용

[codingapple]

기존state와 신규state가 가진 레퍼런스(화살표)가 같아서 그런가봅니다 
아니면 setData 끝나기 전에 onSetInsertToggle이 실행되거나 그래서 그럴수도요

[글쓴이]

글