10.3.2.4 TodoInsert에서 onSubmit 이벤트 설정하기

    지금부터는 버튼을 클릭하면 발생할 이벤트를 설정해 보겠습니다. 방금 App에서 TodoInsert에 넣어 준 onInsert 함수에 현재 useState를 통해 관리하고 있는 value 값을 파라미터로 넣어서 호출합니다.

    TodoInsert.js

    import React, { useState, useCallback } from 'react';
    import { MdAdd } from 'react-icons/md';
    import './TodoInsert.scss';
     
    const TodoInsert = ({ onInsert }) => {
      const [value, setValue] = useState('');
     
      const onChange = useCallback(e => {
        setValue(e.target.value);
      }, []);
     
      const onSubmit = useCallback(
        e => {
          onInsert(value);
          setValue(''); // value  초기화
     
          // submit 이벤트는 브라우저에서 새로고침을 발생시킵니다.
          // 이를 방지하기 위해  함수를 호출합니다.
          e.preventDefault();
        },
        [onInsert, value],
      );
     
      return (
        <form className="TodoInsert" onSubmit={onSubmit}>
          <input
            placeholder=" 일을 입력하세요"
            value={value}
            onChange={onChange}
          />
          <button type="submit">
            <MdAdd />
          </button>
        </form>
      );
    };
     
    export default TodoInsert;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.