onSubmit이라는 함수를 만들고, 이를 form의 onSubmit으로 설정했습니다. 이 함수가 호출되면 props로 받아 온 onInsert 함수에 현재 value 값을 파라미터로 넣어서 호출하고, 현재 value 값을 초기화합니다.

추가로 onSubmit 이벤트는 브라우저를 새로고침시킵니다. 이때 e.preventDefault() 함수를 호출하면 새로고침을 방지할 수 있습니다.

물론 다음과 같이 onSubmit 대신에 버튼의 onClick 이벤트로도 충분히 처리할 수 있습니다.

const onClick = useCallback(
  () => {
    onInsert(value);
    setValue(''); // value 값 초기화
  },
  [onInsert, value],
);
 
return (
  <form className="TodoInsert">
      <input
      placeholder="할 일을 입력하세요"
      value={value}
      onChange={onChange}
      />
      <button onClick={onClick}>
        <MdAdd />
      </button>
    </form>
);