<input type="text" name={name} defaultValue={inputValue[`${name}`]} />

input reset 기능을 만들면서, input의 값을 제거했는데도 제거가 되지 않는 문제가 발생해 찾아보았다.

A component is changing an uncontrolled input to be controlled.

defaultValue를 value로 변경하면서 발생한 이슈

막 페이지 로드되었을때에는 안보이다가, input을 조작하면 이런 경고문구가 뜬다.

<input
	type="text"
  name={name}
  value={inputValue[`${name}`|| ""}
/>

value에서 데이터가 로드되지 않은 경우도 써준다

You provided a value prop to a form field without an onChange handler.

성공적으로 변경을 수행한 줄 알았으나 뜬 문구

나의 경우엔 defaultValue를 사용했을 때 리셋 버튼이 작동을 하지 않았기 때문에 onChange를 써야 했다.

onChange의 경우엔 form단에서 이름을 받아와 입력할 수 있게 만들었기 때문에 일단 공란으로 만들어 두었다 ..

const onchange = (e: React.FormEvent<HTMLFormElement>) => {
    const { name, value } = e.target as HTMLInputElement;
    setInputValue({ ...inputValue, [name]: value });
    console.log(inputValue);
  };

<input
	type="text"
  name={name}
  value={inputValue[`${name}`|| ""}
	onChange={()=>{}}
/>