実績作成【Reactの中級】(Techpit)2巡目

Typescript,CSS in JS(Emotion)

• 6章 : GitHub Pages で公開
  この章はあとでにします。1巡目でGitHub Pagesへ公開することができたので、今回は別のサービスで公開してみたいなと思います。
  【無料公開サービスいろいろ】
  • Heroku
  • Netlify
  • Firebase
  • AWS Amplify Console
• その他：キーダウンイベントで動いていなかった箇所の解消
  単純に記述が漏れている箇所がありました。おそらく自分でもよく理解していなかった箇所だと思うので、改めて見直しました。

useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    const newDirection: string = DirectionKeyCodeMap[e.key];
    if (!newDirection) {
      return;
    }
    onChangeDirection(newDirection);
  };
  document.addEventListener("keydown", handleKeyDown);
  return () => document.removeEventListener("keydown", handleKeyDown);　//←この箇所が抜けていた
}, [onChangeDirection]);

レンダリングされるたびに、新たなイベントリスナーを追加していくため、
イベントクリーン関数を渡さなければなりませんでした。
console.log(newDirection)で確認するたびに、数が増えていったのを確認して、改めて気づきました。
【参考】
https://qapicks.com/question/67845123-9ad6f2348482