인프런 커뮤니티 질문&답변

import React from 'react';
import {useState} from 'react';

function ConfirmButton2 (){
    
    const [isConfirmed,setIsconfirmed] = useState(false);
    const handleConfirm = ()=>{
        setIsconfirmed((prevIsConfirmed) => !prevIsConfirmed);
        // setIsconfirmed(!isConfirmed);
    };

    const [number, setNumber] = useState(0);
    const checkNumber =() =>{

        alert("첫번째 "+number); // 0 
        setNumber((prevnumber)=>{
            alert(prevnumber+"//"+number); // 0 0
            return prevnumber+10;
        });
        setNumber((prevnumber)=>{
            alert(prevnumber+"//"+number); // 10 0
            return prevnumber+10;
        });
        alert("두번째"+number); // 0 
    };

    return (
        <>
        <button onClick = {handleConfirm} >
                {isConfirmed ? "확인됨2" : "확인하기2"}
        </button>
        <button onClick = {checkNumber}>
            {number} 
        </button>
        </>
    );
    

};

export default ConfirmButton2;

이렇게 해서 실행을 하고 숫자 버튼을 클릭하면
첫번째 alert -> set함수 alert -> 두번째 alert -> 두번째 set함수 alert 
이 순서로 나오는데, 
alert ->  set 함수 alert -> 두번째 set함수 alert -> 두번째 alert 이 순서가 아닌 이유를 모르겠어요.