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'이 찍혀버림

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

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

[codingapple]

index.js 파일에 StrictMode 켜있으면 2번씩 렌더링될 수도 있습니다

[최문길]

그거 껐습니다. ㅜㅜ 

[codingapple]

html먼저 렌더링되고 
그 다음에 useEffect 동작해서 state변경되고 
그럼 다시 html이 렌더링됩니다

[최문길]

아 문길아 이거 봐야함 

useEffect는 뭐다?? mount시 update시 된다.

따라서 update없고 mount 없으니 컴퓨터가 콘솔에 위 처럼 찍어준거다....

개념 다시 정리하자 문쨩

[글쓴이]

글