불변성

불변성 : 메모리에 있는 값을 변경할 수 없는 것.

• 원시데이터 : 불변성 O (수정시 저장된 값 자체는 바꿀수 X 새데이터를 만들고 그 새데이터를 바라보게 함)
• 참조형데이터 : 불변성 X (수정시 저장되어 있던 메모리 저장'공간'의 값 자체를 바꿔버림. 메모리 참조는 그대로.)

리액트는 state의 변화에 따라서 화면을 리렌더링(re-rendering)한다. state가 변했다면 리렌더링, 아니라면 리렌더링 X

• state가 변했는지 안변했는지 메모리 주소로 비교
  즉 단순히 값이 변경됨에 따라 화면이 바뀌는게 아니라 state가 변경 되어야 화면이 바뀜

일반 변수 count는 클릭시 값이 늘어나긴하지만 state가 변경이 되지 않아서 화면에 반영이 안됨
일반 변수라서 무시함.

불변성 지켜주는 법

문제

해당코드는 변경 버튼 클릭시 obj의 name을 바꿔주는 코드이나 참조형 데이터는 메모리 주소가 아니라 값을 바꾸기 때문에 메모리 참조는 그대로이다. 따라서 값을 바꿔도 내부적으로만 바뀌고 화면에서는 바뀌지 않는다.

해결법

obj를 전개구문으로 복사한뒤 {...obj} 아예 새로운 메모리 주소를 바라보게함 그 뒤 setObj로 상태 변경을 해주면 정상적으로 리렌더링 가능