타입스크립트 이벤트 함수 타입 선언

이전에 앞에서 React.FC 를 활용하여, props 타입을 선언하는 방법을 배웠습니다. 이를 활용하여, 이번에는 props 에 이벤트 함수가 들어오는 경우, 타입 선언하는 방법을 정리해봅시다.

예를 들어, 우리가 할 일을 추가하는 컴포넌트를 만든다고 해봅시다. 해당 함수의 매개변수 값과, 반환 값의 타입을 선언해야합니다. 매겨변수의 값은 들어가는 매개변수의 타입을 써주면 될 터이고, 함수의 반환 값은 어떻게 해야할까요?
이벤트 함수는 결국, 다른 부모 컴포넌트의 데이터 변경을 위해 사용됩니다. 일반적으로 state 혹은 상태객체를 변경시키기 위해 사용됩니다. 함수를 통해 state 혹은 상태객체가 변경된다는 것은 돌려서 이야기하자면, 함수 자체는 어떤 데이터를 반환하지는 않는다는 것입니다. 따라서 해당 함수의 반환 타입은 void 가 됩니다.

const NewTodo: React.FC<{ onAddTodo: (text: string) => void }> = (props) => {
  const todoTextInputRef = useRef<HTMLInputElement>(null);

  const submitHandler = (event: React.FormEvent) => {
    event.preventDefault()

    const enteredText = todoTextInputRef.current!.value

    if (enteredText.trim().length === 0) {
      // throw an error
      return;
    }
    props.onAddTodo(enteredText);
  }

  return (
    <form onSubmit={submitHandler}>
      <label htmlFor='text'>Todo text</label>
      <input type="text" id="text" ref={todoTextInputRef} />
      <button>Add Todo</button>
    </form>
  )
}

export default NewTodo