Reactで動いていたアニメーションが動かなくなってしまった。

Question

import React from 'react'

const Animation = () => {

  const targetElement = document.querySelectorAll(".animationTarget");
  
  document.addEventListener("scroll", function(){ 
      for(let i = 0;i < targetElement.length;i++){
    const getElementDistance = targetElement[i].getBoundingClientRect().top + (targetElement[i].clientHeight * 0.6);
     
    if(window.innerHeight > getElementDistance ){
        targetElement[i].classList.add("show");
    }
  
 }})

  return (
    <div>
        K.U
    </div>
  )
}

export default Animation;

スクロールされるたびにWindowの高さと、＜li＞要素の高さを比較してshowクラスを付与し、cssでshowクラスに対し動きを設定しています。

コードとファイル https://github.com/K-U22/cat-cute2
github pages https://k-u22.github.io/cat-cute2/

プログラミングを初めて4か月程度でhtml、css、Javascript、Reactは３日程度で理解が浅いです。
YOUTUBEでjavascriptを使ってアニメーションを作る解説動画があったので、動画ではReactは使ってなかったようなのですが、それを参考にReactを使ってコードを書いていきました。
Animation.jsのコンポーネントで

const targetElement = document.querySelectorAll(".animationTarget")

とし（.animationTargetはArticle.jsコンポーネントのクラスネーム）、一時は要素を取得できていたようなのですが、色々やっていくうちに<li>タグのアニメーションが全く動かなくなってしまいました。
console.log(targetElement)としてコンソールを確認してみると、どうやら要素が取得できていないようです。
かなりの時間調べてみたのですが、一向に解決できる気配がないので質問しました。
知識が浅いのでどの部分を提示すればいいかわからないのでgithubのコードとgithub pagesのurlを貼って置きました。
質問の内容が適切ではなかったら申し訳ないです。

Comments

[hoshi-takanori]

React で実 DOM を直接いじるのが間違ってます。アニメーションの前に、まず React の動作原理を理解すべきかと。

[daibutusan]

コメントありがとうございます。Reactは勉強中で、仮想DOMで必要なところだけ再描画して高速化しているとは理解したつもりですが、このような動きを作りたいのならReactでするべきではないということでしょうか？一時は正常に動いていたのですが。

[hoshi-takanori]

React でやるなら querySelector ではなく useRef あたりを使う必要があるはず。関数コンポーネントが呼ばれるタイミングでは実 DOM は未構築かも知れなくて querySelector が成功する保証はないし、そもそも副作用があるコードを関数コンポーネントに直接書くのは良くないです。

[daibutusan]

もう一度色々見直してみました。また基礎から勉強しなおしてみます！ありがとうございました。

Answer 1

ありがとうございました！useRefに関しては改めて学習します！
scrollしたらstateを更新させてレンダリングを促し、そのたびにuseEffectの中の処理をさせることで思い通りの動きになりました。
おそらく３点のコードだと思いますが、改めて勉強します。

import './App.css';
import React, { useEffect,useState } from 'react';
import Article from './conponents/Article';


function App() {


const targetElement = document.querySelectorAll(".animationTarget");

const[num,setnum] = useState(0);

useEffect( () =>{

document.addEventListener("scroll", function(){
for(let i = 0;i < targetElement.length;i++){
const getElementDistance = targetElement[i].getBoundingClientRect().top + (targetElement[i].clientHeight * 0.6);

if(window.innerHeight > getElementDistance ){
targetElement[i].classList.add("show");
}


}})});

const numAdd = () => {
setnum(prevState => prevState + 1);
}

document.addEventListener("scroll", function(){
numAdd();
});

return (
<>
<Article />

</>
);
}

export default App;

Answer 2

とりあえず同様のことをするために読んでおくべき
公式ドキュメントのページを貼っておきます

useEffect
useRef

Comments

[daibutusan]

ありがとうございました！useRefに関しては改めて学習します！
scrollしたらstateを更新させてレンダリングを促し、そのたびにuseEffectの中の処理をさせることで思い通りの動きになりました。
おそらく３点のコードだと思いますが、改めて勉強します。

```javascript
import './App.css';
import React, { useEffect,useState } from 'react';
import Article from './conponents/Article';

function App() {

const targetElement = document.querySelectorAll(".animationTarget");

const[num,setnum] = useState(0);

useEffect( () =>{

document.addEventListener("scroll", function(){
for(let i = 0;i < targetElement.length;i++){
const getElementDistance = targetElement[i].getBoundingClientRect().top + (targetElement[i].clientHeight * 0.6);

if(window.innerHeight > getElementDistance ){
targetElement[i].classList.add("show");
}

}})});

const numAdd = () => {
setnum(prevState => prevState + 1);
}

document.addEventListener("scroll", function(){
numAdd();
});

return (
<>
<Article />

</>
);
}

export default App;
```