onSubmit

function Todos({ todos, onAddTodo, onToggleTodo }) {

  const [text, setText] = useState("");
  const onChange = (e) => setText(e.target.value);
  const onSubmit = (e) => {
    e.preventDefault(); 
    onAddTodo(text);
    setText(""); 
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={text}
          placeholder="할 일을 입력하세요.."
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <TodoList todos={todos} onToggleTodo={onToggleTodo} />
    </div>
  );
}

onKeyDown

function Todos({ todos, onAddTodo, onToggleTodo }) {

  const [text, setText] = useState("");
  const onChange = (e) => setText(e.target.value);
  const onEnter = (e) => {
    if (e.key === 'Enter'){
    e.preventDefault(); 
    onAddTodo(text);
    setText(""); 
  }};

  return (
    <div>
      <form onKeyDown={onEnter}>
        <input
          value={text}
          placeholder="할 일을 입력하세요.."
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <TodoList todos={todos} onToggleTodo={onToggleTodo} />
    </div>
  );
}