stateを使用して関数を変更する際の注意点:async

同期処理:順番に自動的に作業を完了する
非同期処理:作業の委任と待機
JSは通常同期処理(同期)される
:コード行順に前の行から実行
ただし、jsは非同期でコードを実行することができる(非同期処理)
ajax、イベントリスナー、settimeout.
これらの関数は処理するのに長い時間がかかります.
したがってajaxを要求するコードは順番に実行するのではなく、他の操作が完了した後に実行されます.
例:

console.log(1) // 1번째 실행
axios로 get요청하고나서 console.log(2) 실행해주셈~ // 마지막으로 실행
console.log(3) // 2번째 실행

出力2のコードはasync処理をサポートするコードであり,最後に実行する.
2を出力する場合、時間がかかる場合は一時的に保持し、他のコードを実行します.
ajaxリクエストを最後まで実行するには0.00秒もかかります.
物理的にはしばらく処理できないからです.
私たちがどのように反応したか覚えていますか?
function App() {
let [name, setName] = useState('kim')
}
setNameを使用してstateを自由に変更できます.
setName('park'); このように
setName()などのすべてのステータス変更関数はasyncとみなされます.
setName()に時間がかかる場合は、削除して別の場所から実行します.
例:ボタン順に2つの機能を実行する場合は、をクリックしますか?

function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);

  return (
    <div>
      <div>안녕하십니까 전 {age}살 입니다</div>
      <button onClick={()=>{
        setCount(count++); // 이 코드는 오래걸림. 그래서 일단 제껴둠
        if(count < 3){ // 윗줄 setCount 제껴두고 이거부터 실행
          setAge(age++); // count는 아직 2라서 age++이 동작함
        }
      }}>누르면한살먹기</button>
    </div>
  )
}

上記の理由は次のとおりです.
setCount()はasync関数なので.
async関数には時間がかかります.まず削除し、次の行のコードを実行します.
countが最初の意図通り3であれば、年齢がさらに増えるage++の実行を阻止しますか?

function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);
	
  useEffect( () => { //컴포넌트가 랜더링, 재랜더링 될 때 실행되는 함수
    
  }, [count] )
  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button onClick={()=>{
        setCount(count++); // 이 코드는 오래걸림. 그래서 일단 제껴둠
        if(count < 3){ // 윗줄 setCount 제껴두고 이거부터 실행
          setAge(age++); // count는 아직 2라서 age++이 동작함
        }
      }}>누르면한살먹기</button>
    </div>
  )
}

しかし問題は、Effectのように書いても、ページを最初にロードするときに一度実行されるため、思わぬエラーが発生する可能性があることです.
したがって、最初のページをロードするとき、ユーザEffectは実行できない条件を与えるだけでよい.

function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);
	
  useEffect( () => { 
    if(count != 0 && count < 3){ // 첫번째 랜더링이 count===0일땐 실행안되게 처리함.
      setAge(age++); // count는 아직 2라서 age++이 동작함
    }
  }, [count] ) // count에 변화가 있을 경우에만 useEffect 실행하게해주셈
  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button onClick={()=>{
        setCount(count++); // 버튼 클릭할때마다 count 1증가
      }}>누르면한살먹기</button>
    </div>
  )
}