React・TypeScriptで書いてHTMLにビルドして〜みたいなことをしているのだが、コンポーネントはStorybookで閲覧できるようにしている。
HTMLにビルドしているのでJSとかは普通にquerySelectorして〜みたいに書くのですが、Storybookは普通にReactで動くからか、Storybook用のファイルでは例えばカルーセルのコンポーネントでSwiperを使っている場合だと
useEffect(()=> {
new Swiper〜〜〜
});
みたいに書いてあったんですよね。これ何なのだろうか…とずっと思ってました。
なので調べました。
まずそもそもuseEffectはReack Hooksの一種。
なるほど、コンポーネントのレンダリング後に実行されるのですね、このSwiperみたいなDOM操作とかはuseEffect内でやるのですね…！
たしかにDOMContentLoadedでnew Swiperしますし、それと同じことなのですね、納得しました。
正確にはライフサイクルを扱えるようになるもの、のようです。
他のHooks関連のためにも、参考集
