리액트 input 입력 안 되는 버그

state가 input 태그 value를 컨트롤할 수 있도록 input 태그 value 속성에 state 값을 줬더니 인풋 태그에 아무것도 입력이 안 된다. 그런데 콘솔창에 에러도 안 난다.

검색해 봤더니 패키지가 최신 버전이 아니면 이런 문제가 생길 수 있다고 해서 이 링크에 나온 대로 패키지를 최신 버전으로 업그레이드했다.

그런데도 해결이 안 돼서 확인해 보니

const [formData, setFormData] = useState({
    title: "",
    photoLink: "",
    category: "",
    price: 0,
    content: "",
  });

  function handleChange(event) {
    // console.log(event);
    setFormData((prevFormData) => {
      return {
        ...prevFormData,
        [event.target.name]: event.target.value,
      };
    });
  }

코드에 event.target.name이라고 적어놓고 input tag에는

   <input
     onChange={handleChange}
     type="text"
     id="title"
     value={formData.title}
   />

이렇게 id값만 줬다. event.target인 input 태그에 name이라는 속성이 없어서 입력이 안 된 게 아닐까?

handleChange가 호출됐을 때 event.target.value가 콘솔에 찍히도록 해서, handleChange가 호출은 되는지, 이벤트가 발생은 하는지 확인해 보자.

  function handleChange(event) {
    console.log(event.target.value); //이렇게!
    setFormData((prevFormData) => {
      return {
        ...prevFormData,
        [event.target.name]: event.target.value,
      };
    });
  }

onChange 이벤트가 일어나서 handleChange 함수가 호출됐다는 것을 알 수 있다. 호출됐으니까 함수 안에 있는 console.log()가 작동해서 event.target.value를 콘솔에 찍어준 것이다. 즉, onChange 이벤트도 잘 작동하고 handleChange 함수도 잘 호출되는데 handleChange가 새 값을 어디로 보내줘야 될지 몰라서(event.target인 input 태그에 name이란 속성은 없으니까 event.target.value를 어디에 줘야 될지 모름) state가 업데이트 되지 않은 것이다.

input 태그에 name 속성을 주지 않은 게 원인이었다!! name 속성을 줘야 handleChange 함수가 새 값을 어디로 보내줘야 될지 알 수 있다. name 속성을 줬더니(state object의 키값과 같은 이름을 줘야 한다) 이제 입력이 된다!