React - Input 실행오류 A component is changing an uncontrolled input to be controlled.

수정 페이지 에서 input 창에 입력된 값을 동적으로 받아오다가 아래와 같은 워닝을 받게 되었다.

 

 

 

이 에러는 uncontrolled input 이었다가 →  controlled input 으로 바뀌면서 생긴 에러이다.

한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다.

 

 

리액트 공식문서와 블로그를 참고하여 해결하여 보자

React는 두 가지 방식으로 form 입력을 처리합니다.

React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 form 엘리먼트는 변경되지 않은 상태로 유지됩니다.

비제어 컴포넌트(uncontrolled component)는 form 엘리먼트가 React 외부에서 작동하는 것처럼 작동합니다. 사용자가 form 필드(input box, dropdown 등)에 데이터를 입력하면 업데이트된 정보가 React에서 별도 처리할 필요 없이 엘리먼트에 반영됩니다. 그러나, 이는 특정 필드가 특정 값을 갖도록 강제할 수 없다는 의미이기도 합니다.

 

---

React - Input 실행오류 A component is changing an uncontrolled input to be controlled

 

수정페이지에서는 렌더링 할 때, useState 의 service 에 api 데이터 값을 동적으로 받아온다.

그리고  <input 의 value = { 안에 그 값을 } > 넣어준다.  이 부분에서 오류가 자꾸 나버렸다.

const [sercive, setService] = useState<string>('');

useEffect(() => {
  setUserService(id) // 렌더시 api 데이터를 가져오고 그 안에서 setService()로 값을 받아온다.
},[])

.
.
.
생략 

<input value={service} /> // 여기서 이 값이 문제다.

 

 

<input> 의 value 값의 변화를 풀어보면,

value = {undefined}  // 였다가 렌더 후에

value = {'유저 서비스'} // 라는 값이 들어간다.

 

 

그래서 이런 식으로 undefined 처리를 해줘야 한다.

' ' 공백 자체는 controlled input 의 범주에 포함되기 때문에 에러가 나지 않는다.

<input value={ service || '' } />