このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

React Typescriptメモ

2022/08/14

関数コンポーネントの型定義

React.FCと利用する。

import React from "react";
 
const FunctionalComponent : React.FC = () => {
 return <h1>Hello, world</h1>;
};

useStateに明示的に型を指定する場合

ジェネリクス型で定義する。

import React, {useState} from "react";
 
const FunctionalComponent : React.FC = () => {
  const [status, setStatus] = useState<string>('text')

  return <h1>{status}</h1>;
};

onChangeのeventオブジェクトの型指定

inputフィールドのonChangeで渡されるイベントオブジェクトの型はReact.ChangeEvent<HTMLInputElement>を利用する。

 ...中略
  const onChangeHandler = (e:React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value)
  }

return (
  ...中略
    <input type="text" value={input} onChange={onChangeHandler} />

useEffectの実行タイミング

import React from "react";

const FunctionalComponent : React.FC = () => {
  const [count, setCount] = useState(0)
  const [input, setInput] = useState('')
  useEffect(() => {
    document.title = `${count}回クリックされました`
  })
  return (
    <>
      <input type=text value={input} onChange={(e) => setInput(e.target.value)}/>
      <p>{`${count}回クリックされました`}</p>
    </>
  )
}
  • useEffectの第2引数に指定されていない場合、レンダリングの度にuseEffectの関数が実行される。
    • count、inputどちらが変更されてもuseEffectが実行される。
  • useEffectの第2引数に空の配列が指定されている場合は、マウント時に1度だけ実行される
  • useEffectの第2引数に特定の値が指定されている場合(例:[count])場合は、指定した値がレンダリングされて場合実行される。

useEffectでコンポーネントがアンマウントされた場合のcleanup関数

コンポーネントがアンマウント(削除)された場合の処理はuseEffect内でreturnする関数で定義する。

import React from "react";

const FunctionalComponent : React.FC = () => {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `${count}回クリックされました`
    
    return () => {
        // アンマウント時に実行されるcleanup処理
    }
  })
}

非nullアサーション演算子

Reactとは直接関係ないですが、
非nullかつ非undefinedことが保証されている場合、コンパイラに伝えることでエラーを発生させない方法です。

    const onChangeImageHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        if(e.target.files![0]) {
            setAvatarImage(e.target.files![0])
        }
    }

カテゴリ

新規記事