🧐 概要

React ComponentはRenderingの特性を持っています.
たとえば、

dispatch(postView(props.idx))
    .then(response=>{
        const result = response.payload;
        if (result.postElement){
            setRows(result.rows);
        }
    })
    
return (
    <div>
    		{Rows}
    </div>
)

以上のように、Postコンテンツを受信するjsがあるとする

router.get('/api/post/:page',function(req,res,next){
  const page = req.params.page;
  console.log("post is running");

こうして「post is running」ログを軽く入れる

😬😬😬
サーバルータが更新され、呼び出されるのが見えます.
これは低効率な呼び出しで、必要に応じてレンダリングしたいだけです.
それを助けたのはreact HookのuseEffectです.

📋 useEffect

userEffectはReact Hookにあります
ステータスの変化に基づいて特定のタスクを呼び出す方法.

📎 Usage

import React, {useEffect} from 'react'

function TempFunc(props){
	useEffect(() =>{
		< 상태 변화시 호출시키고 싶은 작업 >
	},[])

}

export default TempFunc

userEffectは、関数とstateをパラメータとします.
転送のステータスが変更されると、関数の構造が呼び出されます.
例を挙げる.
共通コンポーネントNavbarは、ログアウトボタンをレンダリングするか、またはレンダリングしない可能性があります.これは、現在のクライアントがログインしているかどうかによって異なります.
したがって、セッション値をステータスとして宣言し、変更に応じてNavbarのレンダリングを制御できます.

const [Session,setSession] = useState("")
    
useEffect(() =>{
  axios.get('/api/getSession')
  .then(response=>{
    setSession(result.data.isAuth)
  })
  
  const navRendering = () =>{
    return (
       <div>
          {Session ? <NavBarUser/> : <NavBar> }
       </div>
    )
  ReactDOM.render(navRendering(),document.getElementById('Container'))
},[Session])

return(
  <div id='Container'>
  </div>

セッションが存在する場合
ログアウトボタンを持つNavBarUserをレンダリングします.
存在しなければ.
ログインボタン付きNavBarをレンダリングします.

🎯 の最後の部分

常に再レンダリングする必要がある要素は、機能部品の戻り文に作成されます.
要求に応じて、再レンダリングする要素は次のとおりです.
useEffect内で作成して効率化することをお勧めします.
注意:https://ko.reactjs.org/docs/hooks-effect.html