[ERROR]changing an uncontrolled input

React Input 에러 해결하기

로그인 페이지를 구현하다가 만나게 된 에러이다.
아이디 저장을 클릭한 뒤 로그인을 할 경우, 아이디를 쿠키에 저장하는데
그 후 다시 로그인을 하게 될 경우,
만약 쿠키에 저장된 아이디가 있다면 아이디 input value 쿠키에 저장된 값으로
쿠키에 저장된 아이디가 없다면 빈 값을 넣는 로직을 설계했다.

  <input
          type="text"
          value={
            cookies.get("user_save_id")
              ? cookies.get("user_save_id")
              : undefined
          }
          placeholder="아이디"
          autoFocus
          {...register("id")}
        />

이렇게 코드를 작성했더니 갑자기 에러가 떴다...
undefined로 정의된 value에서 에러원인이 있는 것 같았다.
다른 블로그에서는 value에 undefined대신 "" 빈 문자열을 넣으면 된다고 설명하고 있는데,
그렇게 될 경우 아이디를 저장하지 않은 사용자가 아이디를 직접 입력할 때 고정 value가 ""여서
입력 자체가 안 된다.

🍪 나의 해결 코드!
value가 아닌 defaultValue를 이용했더니 에러메시지가 더이상 뜨지 않는다.

   <input
          type="text"
          defaultValue={
            cookies.get("user_save_id") && cookies.get("user_save_id")
          }
          placeholder="아이디"
          autoFocus
          {...register("id")}
        />