오늘 배운 React-TypeScript 지식

React-TypeScript 지식

const GuGuDan = () => {

  const onSubmitForm = (e) => {
    e.preventDefault();
  };

  return (
    <>
      <form onSubmit={onSubmitForm}> // 1번 
        <input
          onChange={(e) => setValue(e.target.value)} // 2번
        />
      </form>
    </>
  );
};

위 코드에서 input 태그에 바로 onChange 속성을 주고 그 안에 함수를 작성할 경우 인자에 대한 타입 추론이 자동으로 된다.

하지만 onSubmitForm 처럼 바깥에 함수를 만들고 그 값을 인자로 전달할 경우 타입스크립트는 인자에 대한 타입 추론을 하지 못한다.

이 경우 다음과 같이 인자에 제네릭을 이용해 타입을 명시해주면 된다.

const GuGuDan = () => {

  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => { // 타입 명시
    e.preventDefault();
  };

  return (
    <>
      <form onSubmit={onSubmitForm}> 
        <input
          onChange={(e) => setValue(e.target.value)} 
        />
      </form>
    </>
  );
};