REACT_useState바꿨는데 바로 적용 안될 때

버튼을 누르면 state가 바뀌어야하는데 그게 한번에 안될때가 있다.
오늘 이런 빡치는 경험을 했다.
분명 예전에 해결했던 것 같은데 머리가 나빠서 까먹고 또 구글에 검색하고 있는 나...
이제 더이상 잊어버리지 않겠다는 다짐과 함께 기록에 남겨본다.

문제상황

const [숫자,숫자변경]=useState(0);

const 숫자변경하는함수 =()=>{
   숫자변경(99);
}

//...JSX부분...//
<>
<button onClick={()=>{숫자변경(99)}}>숫자를 99로 바꾸는 버튼</button>
<p>{숫자}</p>
</>

대충 이런 비슷한 상황인데 여기서 버튼을 한번누르면 숫자가 바뀌지 않고 두 번 눌러야 변경
될 때가 있다.

원인은 setState 한다고 해서 값이 바로 바뀌지 않기 때문이라고 하더라..
뭐...비동기 처리 때문이라나...

암튼 난 이렇게 해결 했다.

해결코드

const [숫자,숫자변경]=useState(0);

useEffect(()=>{
   console.log(숫자)
},[숫자])

const 숫자변경하는함수 =()=>{
   숫자변경(99);
}

//...JSX부분...//
<>
<button onClick={()=>{숫자변경(99)}}>숫자를 99로 바꾸는 버튼</button>
<p>{숫자}</p>
</>

useEffect로 state가 변경 될 때마다 체크 해주면 됨.
변경 됬을 때 영향 받을 함수들이 있다면 해당 useEffect 안에 같이 넣어주면 좋다.

다른 해결 방법으로는 setState안에 함수를 넣으면 된다더라...