Warning: A Component is changing an uncontrolled …

input 태그의 value와 onChange 프로퍼티를 통해서 제어 컴포넌트로 사용을 하고 있었는데, 갑자기 위와 같은 에러가 발생하였다.

디버깅을 해보니, input 태그의 value가 최초에 undefined 또는 null로 할당되었다가 이후에 값이 할당되면서 제어되지 않은 상태에서 제어되는 상태로 전환되는 경우에 발생하는 에러이다.

해결방법

1. 입력 요소를 제어되는 컴포넌트로 유지하는 경우

state 상태를 초기화할 때, undefined, null 대신 초기값을 설정한다.

1
const [state, setState] = useState("");
  • 초기값을 빈 문자여롤 둔다.

2. 입력 요소를 비제어 컴포넌트로 유지하는 경우

1
<input defaultValue="default" ref={inputRef} />
  • 비제어 컴포넌트로 사용하려면 value, onChange 대신 defaultValue, ref를 사용하여 입력 요소에 접근할 수 있다.