문제상황
프로젝트 작업중에 해당 경고문구를 보았다.
구성 요소가 제어되지 않는 입력을 제어하도록 변경하고 있습니다. 이는 값이 정의되지 않은 값에서 정의된 값으로 변경되기 때문에 발생할 수 있으며, 이는 발생해서는 안 됩니다. 구성 요소의 수명 동안 제어 또는 제어되지 않은 입력 요소를 사용할지 결정합니다.
제어 컴포넌트 vs 비제어 컴포넌트
React는 두 가지 방식으로 form 입력을 처리합니다.
React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 form 엘리먼트는 변경되지 않은 상태로 유지됩니다.
비제어 컴포넌트(uncontrolled component)는 form 엘리먼트가 React 외부에서 작동하는 것처럼 작동합니다. 사용자가 form 필드(input box, dropdown 등)에 데이터를 입력하면 업데이트된 정보가 React에서 별도 처리할 필요 없이 엘리먼트에 반영됩니다. 그러나, 이는 특정 필드가 특정 값을 갖도록 강제할 수 없다는 의미이기도 합니다.
대부분은 controlled component를 사용해야 합니다.
원인
uncontrolled input 엘리먼트는 undefined 값 인풋을 뜻하고, controlled 는 값이 유효한 인풋을 말한다.
데이터를 처음 렌더링 할 때 email 필드에는 undefined 값이 들어간다. 하지만 렌더링이 끝나면 값을 모두 불러와 email 필드에도 유효한 값이 채워져 controlled 상태로 변한다.
input 엘리먼트가 uncontrolled 에서 controlled 로 변해 에러가 뜨는 것이었다.
해결방법
-
value 대신 defaultValue 값을 넣어준다.
defaultValue={userInfoData?.email}
value 값이 없어도 undefined 값이 뜨지 않도록 default 값을 넣어준다. -
value 값이 없어도 undefined 값이 뜨지 않도록 default 값을 넣어준다.
value={userInfoData?.email || ''}
