[React] Input value 속성 오류

문제 인식

데이터를 수정할 때, 기존 데이터를 보여줘야 하니 input 태그에 value값으로 넣어줬고 잘 보였음. 그런데 새로운 값을 입력하려는데 입력이 안되더라고... 왜이러지?하고 잠깐 뇌정지 후 콘솔 창을 봤더니

요런 warning이 나옴

해결방법

경고 메세지를 보면,
1. read-only field 읽기만 됨
2. mutable 하게 사용하고 싶으면 defaultValue 속성 써라
3. 굳이 value로 써서 값을 바꾸려거든 onChange를 함께 써라

이 세 가지 사실을 파악할 수 있음

<input ref={singerRef} defaultValue={popsong?.singer} className="form-control" name="singer" id="singer" type="text" />

간단한 옵션인 defaultValue를 사용해서 문제해결!!

++ 당황하지 말고 콘솔창 잘 보자!