6.5 To Do Setup

기존 form

import { useState } from "react";

function ToDoList () {
    const [toDo, setValue] = useState("");
    const onChange = (event:React.FormEvent<HTMLInputElement>) => {
        const {currentTarget : {value} } = event;
        setValue(value); // 이벤트 핸들러에서 꺼낸 실시간 입력값 value
    }
    const onSubmit = (event:React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        console.log(toDo); // 지금까지 setValue를 통해 저장된 최신 문자열 toDo
    }
    return (
        <div>
            <form onSubmit={onSubmit}>
                <input onChange={onChange} value={toDo} placeholder="Write a to do"/>
                <button>Add</button>
            </form>
        </div>
    );
}

export default ToDoList;

useform 을 이용한 코드 (간단해짐)

import {useForm} from "react-hook-form";

function ToDoList() {
    const {register, watch} = useForm();
    console.log(watch());
    return (
        <div>
            <form>
                <input {...register("toDo")} placeholder="Write a to do"/>
                <button>Add</button>
            </form>
        </div>
    );
}

export default ToDoList;

react-hook-form에서 {register, watch}만으로도 위에 모든 코드들을 해결

---