[React] 경고 A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. 해결법

어느날 코딩을 하다가 다음과 같은 오류를 마주하게 되었다.

위 오류의 원인은 값이 undefined가 됐기 때문이라고 나와있다.

 

console.log로 input의 value가 참조하는 state들을 출력했다.

 

 

undefined가 된 걸 알 수 있다. 

 

원인은 참조형(title,rating,content를 가지는 객체)인 data에서 setData()를 위와 같이 작성해서 생기는 문제이다.

 

위와 같이 바꿔주어 해결을 하였다.

 

참고로 위같이 해주어도 된다. data가 이전의 값으로 새로운 값을 만드는 것이기에 콜백함수로 해준다고 배웠다.