🐉 2022/01/25 今日の積み上げ
作成日: 2022/01/25
4

実績作成【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