state를 직접 변경하지 않고 useState로 변경해야 하는 이유

 

그냥 리액트는 변수가 state고 변경할땐 useState쓰는거야! 라고 생각해왔다가 오늘 한번 이유를 생각해보았다.

 

state가 변경될때 업데이트되기 때문에??

 

그럼 왜 직접변경은 안되고 꼭 useState로 변경시켜야할까??

 

이유는 리액트가 객체의 메모리주소 를 비교하기 때문이다.

 

직접 변경하면 값만 변경되고 메모리주소는 변경되지 않으므로, state변화를 알아채지 못한다.

 

=> 리렌더링 x, 화면이 업데이트 되지 않음

 

const [name,setName] = useState(' ');

 

 

여기서 setName은 name을 변경하는 것이 아니라, 메모리 어딘가에 있는 값(메모리주소)을 변경하는 것이다.

 

그 후 name과 관련된 DOM이 리렌더링 된다.

 

 

---

참고1
참고2