今日学んだ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のように外部に関数を作成し、その値をパラメータとして渡すと、タイプスクリプトはパラメータのタイプ推定を行うことができません.
この場合、パラメータのJENERICを使用してタイプを明確にすることができます.

const GuGuDan = () => {

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

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