[Lifecycle과 useEffect 2]

[이종열]

1. useEffect(()=>{ 실행할코드 })
2. useEffect(()=>{ 실행할코드 }, [])
3. useEffect(()=>{ return ()=>{ 실행할코드 } })
4. useEffect(()=>{ return ()=>{ 실행할코드 } }, [])
5. useEffect(()=>{ 실행할코드 }, [state1])

오늘 배운 내용입니다.
위 코드들은 처음 페이지 입장 시 , 기본적으로 한번 실행하고 이후에 재랜더링이 일어나면
추가적으로 코드들이 실행한다고 배웠습니다. 각각 실험 해보니 그렇더라구요

그런데  3번째 코드는 설명 듣기로 return안의 내용이 먼저 실행된다고 하셨는데 , 확인해보니 
useEffect부분이 먼저 출력이 되었는데 이건 왜그런가요??

[codingapple]

index.js에 <StrictMode> 켜져있으면 컴포넌트가 2번씩 렌더링될 수 있습니다

[이종열]

네, 그래서 두 번 나오게 안 하려면 StrictMode 제거하라고 하셨었습니다.  2번 나오는 건 알겠는데

return 안 내용이 먼저 실행되고 useEffect가 실행되어야하는거 아닌가요??
확인 내용으로는     

1. useEffect   ->> 여기서 return 이 왜 먼저 나오지 않나요??
2. return 
3. useEffect
4.return 
5. useEffect
6.return 

[codingapple]

return에 있는건 재렌더링이나 컴포넌트 삭제인 경우에만 실행해줘서그런듯요

[글쓴이]

글