A component is changing an uncontrolled input to be controlled.

회원가입 컴포넌트를 만들던 중 input창에 값이 잘 들어가나 확인해보았다.
근데 처음보는 에러가 뜬다.

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components

const Signup = () => {
  const [id, setId] = useInput('');
    return (
      <h2>가입하기</h2>
      <form>
        <label htmlFor="id">아이디</label>
        <input name="id" value={id} onChange={setId} type="text" />
        <button onClick={handleSetForm}>가입하기</button>
      </form>
  )
}

대략 이런식으로 코드를 짰는데, 인풋창에 입력을 하는 순간 나타났다.
입력값이 없을때 undefined상태인데, 이 상태를 빈 문자열 '' 로 처리해주어서 해결할 수 있다고 함.
그래서

const Signup = () => {
  const [id, setId] = useInput('');
    return (
      <h2>가입하기</h2>
      <form>
        <label htmlFor="id">아이디</label>
        <input name="id" value={id || ''} onChange={setId} type="text" /> //<- 수정된부분
        <button onClick={handleSetForm}>가입하기</button>
      </form>
  )
}

이렇게 바꿔주었더니 에러가 나지 않았다.
input을 한두번 써본건 아닌데 그동안은 왜 안나왔다가 이제 나오는걸까??
에러의 세계란 무궁무진하다...