useEffect는 비동기적이지 않다.

필자도 그렇고, 많은 사람들이 useEffect가 비동기적으로 , 그러니까 useEffect의 콜백함수가 실제로 이벤트 루프가 비워질 때마다 콜스택으로 들어가 처리가된다고 생각을 하고있다. 그리고 충분히 그렇게 오해를 할만한 이유가 있다.

 

function App () {
	useEffect(() => {
    	console.log("hi")
    },[])
    
    return (
    <div>누가 먼저 보일까요?</div>
    )
}

컴포넌트는 함수이고, 위의 함수가 동기적이라면 콘솔에 "hi"가 먼저 찍힌 뒤 "누가 먼저 보일까요?"라는 텍스트가 화면에 보여질 것이다.

하지만, 실제로 작동하면 "hi"가 나중에 찍히는 것을 알 수 있다. 그렇다면 왜 useEffect 안의 콜백함수는 element를 반환한 뒤에, 실행이 되는 것일까?

 

그 이유는 리엑트의 생명주기 함수들이 virtual dom을 생성하는 rendering phase가 아니라,
해당 virtual dom을 기존의 메모리에 저장된 old virtual dom과 diffing algorithm을 이용하여 비교해서 실제 DOM을 효과적으로 CRUD하는 commit phase 에서 실행되기 때문이다.

 

리액트 생명주기

 

위의 사진은 리액트의 생명주기이다. 왼쪽에 보면, 생소한 단어들이 보이는 데 위 아래로 "Render Phase" 와 "Commit phase" 로 나누어져 있다. 생명주기 함수들 즉, useEffect는 Render Phase가 아닌 Commit phase에서 나타나기 때문에 element를 반환한 후 실행되는 것이다. 그렇기에 useEffect가 비동기적이라고 착각하는 사람들이 많았던 것이다. 

 

좀 더 확실하고, 아직까지도 비동기적이라 생각되는 사람들은 아래 블로그를 정독하시길 바란다!

굉장히 자세하게 useEffect에 대해서 알려주고 있다.

 

 

 

 

 

 

https://velog.io/@chltjdrhd777/useEffect%EB%8A%94-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81%EC%9D%B4%EC%A7%80%EB%A7%8C-%EB%8F%99%EA%B8%B0%EC%A0%81%EC%9D%B4%EB%8B%A4

useEffect는 비동기적이지만, 동기적이다(?)