Lifecycle과 useEffect 숙제

function List(props) {
    let [alert,setAlert] = useState(true);
    useEffect(()=>{
        setTimeout(()=>{
            setAlert(false)
        },2000)
   
    })
    console.log('render')
    let product = props.data;
    const navigate = props.navigate;
    return (
        <div className="container p-4">
            <div className="row">
                {
                    alert == true ?  <div className="alert alert-warning">
                    09-HomeWork-2초이내 구매시 할인
                    divbox숨기기
                </div> : console.log('check')
                }
            .
            .
            .

console.log('check')가 2번 찍히는데

제 머릿속에서는 
콘솔창에
'render' <- 앱실행되니까 당연히 render가 나와야함
'render' <- useState변경되므로 리렌더링 trigger 되서 리렌더링 되니까 당연히 나와야함
'check'  <- 삼항연산자로 console창에 당연히 떠야하므로 이해됨
이 이후에 
useEffect가 실행되서 2초후 setAlert가 false로 들어와도 재렌더시 false 였으므로 
setAlert의 값이 동일하므로 리렌더링이 안됨, 그렇게 배웠고
이라고 생각했는데..
'render' <- 왜 실행되는지 모르겠음
'check'  <- 왜 실행되는지 모르겠음

정리하자면
제 생각으로 콘솔창에는
'render'
'render'
'check' 까지여야 하는데,

실제 찍힌 것은
'render'
'render'
'check' 
'render'
'check'이 찍혀버림

질문이유는 전반적인 작동원리를 알아야 내가 원하는대로 컨트롤 할 수 있기 때문입니다.

센세 도와주세요 어제부터 오늘까지 밤새서 알아보려하는데 머리가 부족한가 봅니다.