• 컨트롤드 컴포넌트를 선호하기 때문에 dom 처리를 위한 input 처리에는 별로..

import React, { useContext, useRef } from 'react';
import { TodoContext } from "./App";

const Form = () => {
	const inputRef = useRef();
	const { todos, addTodo } = useContext(TodoContext);

	return (
		<form action="">
			<input type="text" name="" ref={inputRef} />
			<button
				type="button"
				onClick={() => addTodo({
					id: todos.length + 1,
					title: inputRef.current.value,
					completed: false,
				})}
			>
				할일추가
			</button>
		</form>
	);
};

export default Form;