useLayoutEffect는 언제 쓰는건가요?

Question

안녕하세요~ 이번에 코드 리뷰를 받았는데 useEffect 대신 useLayoutEffect를 쓰는게 좋아요~ 라는 피드백을 받았습니다.

코드 구조는 컴포넌트에서 ref를 선언한 후 useEffect로 해당 값을 바꾸고, 추후 다른 컴포넌트의 훅에서 이 ref 값을 참조해서 로직이 돌아가는 형태였습니다 (회사 코드라 첨부를 할 수가 없네요...ㅠㅜ)

그런데 왜 useEffect 대신에 useLayoutEffect를 써야하는지 잘 모르겠더라구요. 혹시 이유를 아시는분 있나요?

손정현 · Answer

안녕하세요!
음, 코드가 어떤지 몰라서 정확한 이유는 알 수 없지만 아마도 렌더 직후, 브라우저가 새로운 창을 그리기 전에 돌아가야하는 로직이여서 그런 것 아닐까요?

useEffect는 브라우저가 스크린을 보여주고 난 뒤에 실행되고 useLayoutEffect는 React가 DOM을 업데이트하고 브라우저가 스크린을 다시 그리기 전에 실행됩니다.

hooks-flow 한번 참고해보세요!