React 입력이 uncontrolled와 controlled 사이에서 전환됨
입력값이 처음에는 undefined였다가 문자열이 되거나 반대로 바뀌어 React 경고와 입력 상태 이상이 발생하는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- 입력 컴포넌트는 처음부터 끝까지 value·onChange를 사용하는 controlled 방식 또는 defaultValue·ref를 사용하는 uncontrolled 방식 중 하나를 유지해야 합니다.
- 먼저 확인할 항목
- 콘솔에 A component is changing an uncontrolled input to be controlled 또는 반대 문구가 표시되는지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- React
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 관련 기술
현재 증상
- 화면 동작 오류
- 애플리케이션 오류 메시지
먼저 확인할 항목
콘솔에 A component is changing an uncontrolled input to be controlled 또는 반대 문구가 표시되는지 확인합니다.
`value` 또는 `checked`의 초기값이 undefined·null인지 확인합니다.
같은 입력에 `value`와 `defaultValue`를 함께 지정했는지 확인합니다.
비동기 데이터가 도착하기 전후로 입력 방식이 바뀌는지 재현합니다.
피해야 할 조치
주의
- 경고를 숨기기 위해 value를 임의의 문자열로 덮어쓰지 않습니다.
- 사용자가 입력한 값을 비동기 응답으로 무조건 덮어쓰지 않습니다.
환경별 원인과 조치
확인 순서
- 콘솔 경고의 원문과 문제가 난 입력의 초기값·변경 시점을 기록합니다.
value={data?.name}처럼 첫 렌더링에서 undefined가 될 수 있는 표현을 찾습니다.- controlled 방식이면 초기값을 빈 문자열 등 동일한 타입으로 정하고, uncontrolled 방식이면
defaultValue와 ref를 사용합니다. - 비동기 데이터가 도착해도 입력 방식이 바뀌지 않는지 다시 확인합니다.
사용자 입력 중 서버 응답을 수신해 value를 덮어쓰면 데이터가 사라질 수 있습니다. 초기화 동작과 자동 갱신 동작을 분리하십시오.
참고 자료
Controlling an input with a state variable | React (새 창에서 열림)
React · 공식 자료 · 확인 범위: controlled input은 value가 문자열 등 일관된 타입으로 유지되어야 하며 undefined에서 값으로 바뀌면 안 됩니다., controlled와 uncontrolled 방식을 컴포넌트 생명주기 중간에 전환하지 않아야 합니다. · 확인일: 2026-08-04