青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

useEffectを調べた。ライフサイクル扱えるようになるのね。

React・TypeScriptで書いてHTMLにビルドして〜みたいなことをしているのだが、コンポーネントはStorybookで閲覧できるようにしている。

HTMLにビルドしているのでJSとかは普通にquerySelectorして〜みたいに書くのですが、Storybookは普通にReactで動くからか、Storybook用のファイルでは例えばカルーセルのコンポーネントでSwiperを使っている場合だと

useEffect(()=> {
    new Swiper〜〜〜
});

みたいに書いてあったんですよね。これ何なのだろうか…とずっと思ってました。

なので調べました。

まずそもそもuseEffectはReack Hooksの一種。

sbfl.net

なるほど、コンポーネントのレンダリング後に実行されるのですね、このSwiperみたいなDOM操作とかはuseEffect内でやるのですね…!

たしかにDOMContentLoadedでnew Swiperしますし、それと同じことなのですね、納得しました。

正確にはライフサイクルを扱えるようになるもの、のようです。


他のHooks関連のためにも、参考集

sbfl.net

qiita.com

qiita.com