[React] input 에러 : A component is changing an uncontrolled input to be controlled

회원정보 수정페이지를 구현하는 도중 위와 같은 콘솔창에 위와 같은 에러가 발생했다.

일반적으로 수정페이지에 접속하면 뜨지 않고, 새로고침을 했더니 나타났는데...

또 undefined 문제인걸 보니 user 데이터를 불러오는데 문제가 있는 것 같았다.

해결방법

아래와 같이 input의 value값에 || 연산자로 undefined일 때 공백을 지정해주었더니 해결되었다.

<input
  type="text"
  name="email"
  value={values.email || ""}
  onChange={handleChange}
/>

서버 데이터 불러오기 의외로 까다롭다...