React의 hooks와 Event를 활용하여 개발할 때 타입을 지정하는 방법에 대해 알아보자.

Hooks

useState

초기 값을 설정하면 자동으로 타입이 추론되어 별도로 타입을 지정할 필요가 없다.
만약 초기 값을 설정할 수 없으면 다음과 같이 작성할 수 있다.

type User = {
  uid: string;
  name: string;
  email: string | null;
  photoURL: string | null;
};

const [user, setUser] = useState<User | null>(null);

useEffect

별도의 타입 지정이 필요 없다.

useRef

특정 DOM을 선택하는 경우, 다음과 같이 작성한다.

const TextInputWithFocusButton = () => {
  const inputEl = useRef<HTMLInputElement>(null);
  
  const onButtonClick = () => {
    if (inputEl.current) {
      inputEl.current.focus();
    }
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
};

특정 DOM을 선택하기 전까지는 아직 어떤 DOM이 선택될지 모르기 때문에 초기 값으로는 null을 설정한다. 이후 JSX 코드가 실행되면서 특정 DOM을 가리키게 되면 선택된 특정 DOM의 타입을 지정한다.

Event

React는 React의 이벤트 시스템을 사용한다. 때문에 이벤트를 다룰 때는 React 버전의 이벤트를 구체적으로 지정해야 한다. 예를 들어 onClick의 처리는 다음과 같다.

import { useState } from "react";

const Toggle = () => {
  const [isToggleOn, setIsToggleOn] = useState(false);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    setIsToggleOn((prev) => !prev);
  };

  return <button onClick={handleClick}>{isToggleOn ? "ON" : "OFF"}</button>;
};

자주 사용되는 Form의 이벤트 처리는 다음과 같습니다.

import { useState } from 'react';

const Form = () => {
  const [form, setForm] = useState({ name: '', age: 0 });
  
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setForm({ name: '', age: 0 });
  };

  const { name, age } = form;

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={name} onChange={handleChange} />;
      <input type="number" name="age" value={age} onChange={handleChange} />;
    </form>
  );
};

이외에도 TouchEvent, ClipboardEvent 등 다양한 이벤트가 존재한다.

참고 링크

Typescript + React 시작하기