[React & 가계부프로젝트] v-model 처럼 input값 변경 감지하기

const [form, setForm] = useState<Form>({
    id: '',
    title: '',
    amount: '',
});

const handleInputTitle = (e: any) => {
    const title = e.target.value;
    setForm({ ...form, title });
};

return (
	<input type="text" value={form.title} onChange={handleInputTitle}>
)

리액트에서는 v-model처럼 값을 한번에 변경까지 감지하는 방법은 useEffect를 쓰거나 v-model이 값과 update가 합쳐진 것이기 때문에 udpate를 onChange로 사용하는 수밖에 없다.

 

+깨달음

처음에  onChange를 안쓰고 value={form.title}했더니 warning과 함께 input이 readonly처럼 써지지가 않았다.
하라는대로 defaultValue로 변경해주었더니 되긴했는데 나중에 onChange를 쓰고 나서는 또다시 안되었다.

>> 정리하면 value를 쓸때는 꼭 onChange나 onInput등과 함께 써주어야한다.
안써줄때는 defaultValue로 초기값을 설정해주면 된다.