혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다.

input의 초기값을 undefined로 설정할 때 발생하는 오류

react_devtools_backend.js:4026 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:
React 공식문서 : Controlled Components

const [amountValue, setAmountValue] = useState(); // undefined로 초기화

해결 방법

// ver 1
// input 값의 value는 문자열로 취급되므로 숫자 0 대신 빈 문자열로 초기화 가능
const [amountValue, setAmountValue] = useState('');
return <input
    type="number"
    value={amountValue}
    onChange={amountChangeHandler}
  />

      
// ver 2
// JSX의 input에 value={amountValue || ''} 도 가능
const [amountValue, setAmountValue] = useState();
return <input
    type="number"
    value={amountValue || ''}  //<----- undefined일 때 빈 문자열로 취급
    onChange={amountChangeHandler}
  />

느낀점 및 궁금한점

useRef를 사용하는 비제어 컴포넌트는 제외하고, input value를 항상 state로 관리해야하는지 의문이 든다.

React에서 input의 value를 state로 관리하지 않아도 핸들러 함수 내부에서 event.target.value로 값을 추출할 수는 있었다. 하지만 공식문서를 보면 value를 state로 관리하는 것을 권장하는 것 같다. 전자의 경우 값이 변해도 리렌더링이 발생하지 않는데, 화면에 표시가 필요없는 값이라면(심지어 이 경우는 화면에 보여진다) state로 관리하는게 좋은 방법인지 의문이다.