React input 태그에 글자가 입력되지 않는 현상

value 속성만 지정하지는 않았는가?

 

input의 상태를 관리할 때에는 input 태그의 value 값을 설정해주는 것이 중요하다. 그러면 상태가 바뀌었을 때 input의 내용도 업데이트된다. 하지만 React에서는 value 속성만 지정하면 값이 입력되지 않는 현상이 있다. value 값에 의해서만 값이 변경되며, 사용자가 입력해도 input 값은 변경되지 않는다. 해당 문제는 onChange 이벤트를 등록하여 input을 수정할 수 있는 상태를 만들어서 해결이 가능하다.

const [email, setEmail] = useState('');

const onChangeEmail = useCallback((e) => {
  setEmail(e.target.value);
}, []);

return (
  <input
    value={email}
    onChange={onChangeEmail}
    ...
  />
);

 

---

 

태그에 없는 속성을 사용하지는 않았는가?

 

const signUp = () => {
  const [userInfo, setUserInfo] = useState({
    email: '',
    password: '',
  });

  const handleChange = ({ target }) => {
    setUserInfo((prev) => ({ ...prev, [target.name]: target.value }));
  };

  return (
    <input
      type="email"
      value={userInfo.email}
      onChange={handleChange}
      placeholder="이메일을 입력해주세요"
      required
    />
    // 패스워드 input태그는 생략...
  );
};

handleChange함수에서는 target을 사용하여 email의 값을 바꾸려했다. handleChange 함수내에 콘솔을 출력하는 명령문을 넣고 input 태그에 사용자가 글을 입력할 때마다 아래와 같이 똑같은 결과를 계속 확인할 수 있었다.

const handleChange = ({ target }) => {
  setUserInfo((prev) => ({ ...prev, [target.name]: target.value }));
  console.log(target);
};

// target 결과
<input type="email" placeholder="이메일을 입력해주세요" required="" class="sc-cjERFW fKYQGa" value="">

위 결과를 통해서 onChange 이벤트는 일어나고 있음을 확인할 수 있었다. 하지만 handleChange함수에서 target.name과 target.value를 이용하여 input에 입력된 값을 변경하려는데 input 태그에는 name속성을 지정하지 않았다. 그렇기에 handleChange함수가 작동해도 target.name이라는 키는 기존에 존재하지 않기에 계속 새로운 키(공백)에 값(입력한 한 글자)을 만들어냈고, target.value는 userInfo.email상태를 가져오도록 되어있는데, userInfo.email의 상태는 업데이트되지 않으므로 input 태그는 계속 공백을 유지했다.

 

---