ReactJS에서 Input 컴포넌트 controlled/Uncontrolled 차이

react-dom.development.js:88 Warning: ForwardRef(InputBase) contains an input of type date with both value and defaultValue props. Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). Decide between using a controlled or uncontrolled input element and remove one of these props.

이 에러는 <TextField> 혹은 <Input>등의 입력 관련 컴포넌트에 defaultValue 속성과 value 속성을 동시에 사용할 때 나오는 경고입니다.

'제어 컴포넌트(controlled component)는 value 속성을 사용해 React의 state에 의해 값이 제어됩니다. 반면 '비제어 컴포넌트(uncontrolled component)'는 defaultValue를 사용하여 초기값을 설정하고, 그 후 사용자의 입력에 따라 자유롭게 변경됩니다. 

에러로 처리되지는 않아 보기에는 정상 작동하는 것처럼 보일 수 있지만 차이를 알아두고 사용하는게 좋습니다. 

끝!!