react TextField setState 이후 바뀌지 않을 때 (재렌더링 안됨)

에러 내용

---

setState 해도 요소가 바뀌지 않음

react의 material ui의 TextField에서 setState를 해도 관련된 요소가 변경되지 않습니다.  

<TextField
  variant="outlined"
  label="문제명"
  defaultValue={state}
/>

 

에러 원인

---

컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링 된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정합니다. 같지 않을 경우 React는 DOM을 업데이트합니다.
-react 공식 홈페이지-

 

react는 setState로 인해 요소를 업데이트를 해야 할 때 성능최적화를 위해 virtual DOM을 사용합니다.

이는 state가 바뀐 전과 후의 요소를 비교하여 다른 부분을 부분적으로 제렌더링 합니다.

 

그런데 이러한 "비교"할 때 그리 엄격하게 비교하지 않습니다.

state를 직접적인 텍스트로 사용하거나 map을 사용하여 요소 배열을 만드는 경우는 잘 업데이트되지만

state를 속성(attribute)으로 사용하거나 간접적으로 사용하면 잘 업데이트되지 않습니다.

 

이렇게 대충 비교하는 react에게 어떻게 하면 요소를 업데이트하라고 말할 수 있을까요?

 

해결 방법

---

state를 key로 주면 해결됩니다.

요소가 바뀌었는지 비교할 때 "key"를 가장 결정적으로 고려하기 때문입니다.

 

<TextField
  key={state}
  variant="outlined"
  label="문제명"
  defaultValue={state}
/>

 

결과 화면

---

key가 적용된 모습

 

 

 

제가 이전에 포스팅한 것을 참고하였습니다.

이번 경우는 TextField의 defaultValue로 state를 전달하였는데

화면에 state가 직접적으로 표시됨에도 불구하고

attribute로 전달되었기 때문에 제대로 업데이트가 되지 않았습니다.

참고 자료

---

 

리액트 컴포넌트 안 바뀜(react component not change)

 

성능 최적화 – React