React Error : Warning: A component is changing a controlled input to be uncontrolled. 발생시 해결 방법

1) input을 입력했을때 생기는 Error(Warning)

Warning : A component is changing an uncontrolled input of type
undefined to be controlled. Input elements should not switch 
from uncontrolled to controlled (or vice versa). 
Decide between using a controlled or uncontrolled input element 
for the lifetime of the component.

• React를 사용하다가 input에 값을 입력 했을때, Console에 이런 문구가 나오는 경우가 있다.
  (즉, value type이 text값인 input에 undefined가 적용된 value(String, Number)가 있을때 생기는 에러다.)

• (1) 발생 원인

// 이메일(ID) : onChange 이벤트 함수
  const [email, setEmail] = useState("");
  const saveEmailID = (event) => {
    setEmail(event.target.value);
    console.log(email);
  };
  
  const Signup = () => {
    	<input
          className="mail_input"
          type="text"
          placeholder="이메일"
          onChange={saveEmailID}
        />
  }

• 해당 기능은 이메일 input을 입력했을때, setEmail 이라는 const 변수에 setState를 지정해서 email value를 input에 저장시키는 기능을 구현한 것인데, input 태그에 value가 undefined(정의된 값이 없음)이기 때문에 다음과 같은 경고성 에러가 발생된것이다.
  (참고로, 이 에러는 다른 에러와는 다르게 코드 기능이 동작하는 경고성 에러이므로 로직이 동작하는데 문제가 없지만, 위험한 상태에서 로직이 실행되고 있기 때문에 에러를 수정하는 것이 원칙이다.)

• (2) 해결 방법

// 코드 생략
<input 
	className="mail_input"
    type="text"
    placeholder="이메일"
    value={email}
    onChange={saveEmailID}
/>
// 코드 생략

• 다음과 같이 input 태그에 value 요소를 지정해서 email 이라는 값을 할당시켜주면 undefined가 정의된 값으로 지정되어 경고성 에러가 사라지게 된다.
  (즉, undefined 되어있는 value에 값을 넣어주면 해결된다는 뜻이다.)