const Game: React.FC = () => {
  const [history, setHistory] = useState<Array<HistoryData>>([  ★変数作っておいて
    { squares: Array(9).fill(null) },
  ]);
  const [stepNumber, setStepNumber] = useState<number>(0);
  const [xIsNext, setXIsNext] = useState<boolean>(true);
  
  const handleClick = (i: number) => {     ★handleClickの定義の中で上記の変数を使用すること。
    const _history = history.slice(0, stepNumber + 1);
    const current = _history[_history.length - 1];

const Board: React.FC<BoardProps> = ({ squares, onClick }) => {
  const renderSquare = (i: number) => {
    return <Square value={squares[i]} onClick={() => onClick(i)} />;　　★renderSquareを介して、その中のアロー定義で、squares[i]とonClickを結びつける
  };

return (
    <div>
      <div className="board-row">
        {renderSquare(0)}  ★  {renderSquare}ではなく、()がついている
        {renderSquare(1)}
        {renderSquare(2)}

  const _history = history.slice(0, stepNumber + 1);
  slice()でピーを作成して操作する。

本家の抜粋
イミュータビリティには、もう 1 つの利点があります。デフォルトでは、親コンポーネントの state が変更されると、
すべての子コンポーネントは自動的に再レンダーされます。これには state 変更によって影響を受けていない子コンポーネントも
含まれます。
再レンダー自体はユーザに気付かれないものですが（積極的に避ける必要はありません！）、パフォーマンス上の理由から、
影響を受けていないことが明らかなツリーの一部の再レンダーをスキップしたい場合があります。