state 변경함수 사용할 때 주의점 : async 강의 질문있습니다.

[정수영]

저는 선생님과의 코드와는 다르게, 처음에 useEffect 안의 코드가 실행되는 것을 막기위해서 clean up function을 사용해보았습니다.

그랬더니 제 의도대로 페이지를 로드한 처음화면에서는 age가 20을 유지했습니다. 

하지만 버튼을 한번 클릭하면 age가20에서 21에서 잘 증가하지만,

버튼을 두 번 누르면 age가 변화하지 않고 그대로 21 이더군요.

버튼을 세 번 누르면 age가 21에서 22로 증가합니다.

버튼을 네 번 이상 누르면 age가 22에서 더 이상 증가하지 않습니다.  

버튼을 두 번 누르면 왜 age가 21에서 변하지 않다가, 버튼을 세 번 누르면 어째서 age가 21에서 22로 변하는 걸까요?

왜 이런 현상이 발생하는 것일까요? 

function Practice(){

  let [count, countC] = useState(0)

  let [age, ageC] = useState(20)

  useEffect(()=>{
    return()=>{
      if( count < 3){
        ageC(age+1)
      }
    }
  }, [count])

  return(
    <>
      <p>안녕하세요, 저는 {age}살 입니다</p>

      <button onClick={()=>{
        countC(count+1)
      }}>누르면 증가하는 버튼</button>
    </>
  )
}

[codingapple]

첫로드시에도 useEffect는 실행되니 원래 그냥 21부터 시작할 것 같습니다 
그리고 간혹 useEffect는 최신 state말고 이전 state값을 이용하는 때도 있습니다

[글쓴이]

글