useEffect

userEffectは、クラスコンポーネントのコンポーネントDidMount、コンポーネントDidUpdateコンポーネントWillUnmountの機能を組み合わせたHooks
ここでは、反応のライフサイクルを知ることが重要です.
1.useEffectは、Webページをロードするときの最初のコンソールです.log("mount!")実行する
2.コンポーネントが再レンダリング/Webページでリフレッシュされたとき、コンソール.log("update!")実行する
3.someStatesが変更された場合、userEffectはコンソールを再実行します.log("mount!")実行する

useEffect( () => {
	//componentDidMount, componentDidUnmount 부분
    console.log("mount!")
    
    return () => {
    	//effect이후의 componentDidUpdate 부분
        console.log("update!")
        
    }
}, [someStates]);

また、useEffectは、業務単位で複数使用可能

useEffect(()=>{
	getData();
},[])

useEffect(()=>{
	checkAuth();
},[auth])

useEffect(()=>{
	lazuLoading();
},[])

...

質問する

これは私が反応器からデータを受信する過程で学んだ問題で、次のコードを実行すると、大量の重複数のため、ブラウザが展開されることがわかります.

const Pagination = () => {
    const [list, setList] = useState('');

    useEffect( () => {
        axios.get("https://reqres.in/api/products/1")
        .then((res) => {
            setList(res.data.data)
            console.log(res.data.data)
        })
    });

    return(
        <>
            {list.name}
        </>
    )
}

の原因となる

userEffectのComponentDidMount部分でuserStateを使用しているためです.
useStateを使用するたびにレンダリングされます.

のデータを受信すると、「ユーザ効果」が実行され、

ユーザ状態でデータを割り当てると、レンダリングは

を実行します.

レンダリングを実行し、userEffectを再実行...無限反復

解決策

userEffectの2番目のパラメータに空の配列を入れる

useEffect( () => {
        axios.get("https://reqres.in/api/products/1")
        .then((res) => {
            setList(res.data.data)
            console.log(res.data.data)
        })
    }, []); //빈배열 추가

これを依存配列と呼び、「配列された要素が何であるかに応じて、イベントを依存的に実行する」という意味です.
よく理解できませんが、以上の使用効果の内容は不要な繰り返し作業を避ける方法のようです.
また、依存配列にパラメータを入れると、これらのパラメータが変化した場合にのみuserEffectが実行されます.
したがって、その効果を実行するトリガキャラクタは、対応する配列に記載されている必要があります.

useEffect( () => {
        axios.get("https://reqres.in/api/products/1")
        .then((res) => {
            setList(res.data.data)
            console.log(res.data.data)
        })
    }, [data01, data02]); //data01, data02에 변화가 생기면 실행