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

회원가입 기능 중 이메일과 비밀번호를 입력받아 유효성 검사 등을 마치고 inputData에 입력값을 저장하는 컴포넌트에서 이런 에러가 발생하였다.

1. 원인은?

완전히 처음보는 에러인데다가 원인을 파악하기 위해 에러가 어떤 상황에서 발생하는지 확인하는 것도 쉽지 않았다. 에러 재현을 위해 이것저것 시도를 했을 때, 페이지의 리렌더링 동작시 에러가 발생하는 것을 확인했는데 이게 에러가 발생할 때도 있고 아닐 때도 있는 기이한 모습을 보였다.

다만 에러 메시지에서 원인을 명확하게 설명해주고 있어

the value changing from undefined to a defined value

-> 정의되지 않은 값에서 정의된 값으로 변화하는 value.

이 뜻은 input 태그의 value가 처음에 정의되지 않았다는 것이라는 뜻! 원인이 밝혀졌으니 해결에 나서면 된다.

2. defined하게 변경.

간단한 에러라서 그런 것인지 해결 방법도 단순하기 그지 없었다. input 태그의 value 속성에서 값이 undefined인 경우 '' 빈 문자열 데이터가 들어가도록 변경해주었다.

<Input value={userData.email || ''}/>

그리고 다시 동작 테스트를 실행해보면...

3. 안되네?! 그렇다면..

에러는 사라졌는데 input 태그가 입력값을 받지 못한다! 구글링으로 얻은 몇 개의 결과물이 모두 동일한 해결책을 제시하고 있었는데, 이게 먹히지 않은 것이다.

또 다른 해결책은 value의 초기값을 처음부터 명확하게 적용해주는 것.

따라서 회원가입 기능의 로직을 최상단 '회원가입 컴포넌트'에서 입력값을 제어할 useState 하나를 선언하고, 하위 컴포넌트들에 props로 전달해주는 방향으로 수정하였다.

const [userData, setUserData] = useState({
    email: '',
    password: '',
    name: '',
    phonenumber: '',
    displayname: '',
    address: '',
    address2: '',
});

<RequestEmailAndPasswordVerify userData={userData} setUserData={setUserData} />

다행스럽게도 이렇게 구현하자 에러도 발생하지 않고 기능도 정상적으로 동작하였다.