제어 입력(Controlled)과 비제어 입력(Uncontrolled)은 어떻게 구분하나요?

이렇게 답해 보세요 (핵심 답변)

제어 입력은 input의 value나 checked를 React state로 연결하고 onChange마다 상태를 갱신해, 입력값의 단일 진실 공급원을 React에 두는 방식입니다. 반면 비제어 입력은 defaultValue로 초기값만 지정하고 실제 현재 값은 DOM 요소 자체가 보유하게 한 뒤, 제출 시점에 FormData나 ref로 읽어 오는 방식입니다. 실시간 입력 포맷팅이나 조건부 UI 연동이 중요하면 제어 입력을, 입력 필드가 많고 렌더 빈도를 줄이면서 제출 시점 검증 위주로 다룬다면 비제어 입력이나 폼 라이브러리를 선택합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 제어 컴포넌트는 현재 입력값이 항상 React state와 일치하므로 버튼 활성화 여부나 즉시 검증 메시지를 선언적으로 계산하기 쉽습니다.
2. 비제어 컴포넌트는 타이핑마다 전체 폼 컴포넌트가 재렌더되는 비용을 줄이고 브라우저 기본 폼 동작과 자연스럽게 결합할 수 있습니다.

면접에서 자주 하는 실수

초기값이 없다는 이유로 value에 undefined를 넣었다가 나중에 문자열을 넣으면 비제어 모드에서 제어 모드로 중간에 전환되어 React 경고가 발생하므로 빈 문자열('') 등으로 모드를 일관되게 유지해야 합니다.