[React] useEffect vs useLayoutEffect

이 둘을 비교하기 전에 브라우저가 렌더링 되는 과정을 알아야 합니다.

 

검색창에 www.google.com을 검색했다면 다음과 같은 과정으로 브라우저가 렌더링이 됩니다.

 

1. www.google.com  과 일치하는 ip를 dns 캐시에서 찾습니다

2. 만약에 dns 캐시에 없다면 dns 서버에서 해당 url과 일치하는 ip를 찾습니다.

3. 웹서버에 html, css, javascript 파일을 http 요청합니다.

4. 해당 파일을 받으면 html을 파싱해서 dom으로 css를 파싱해서 cssom으로 만든 후 두개를 결합하여 렌더트리를 만듭니다.

5. 렌더트리가 완성 되었다면, reflow 과정을 통해 레이아웃을 계산합니다 (크기, 위치 등등)

6. reflow과정이 끝났다면 repaint 과정을 통해 그립니다.

 

그렇다면 어떤 과정에서 동작할까요?

1. useLayoutEffect

5번 과정 reflow 를 통해 레이아웃을 다 그린 직후에 동작합니다.

 

2. useEffect

6번 과정까지 모두 끝난 후에 실행됩니다.

 

결론

상황에 따라 useLayoutEffect가 필요할 수도 있겠지만, useLayoutEffect 내부의 로직이 복잡해서 시간이 오래걸린다면

사용자가 레이아웃을 보는 데 시간이 오래걸릴 수 있습니다.

기본적으로 useEffect 를 사용하고, 필요시에 useLayoutEffect를 사용하면 좋을 것 같습니다.

 

참고:

https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5