useLayoutEffect란?(useEffect 와 차이점)

useEffect 와 useLayoutEffect는 비슷한듯 비슷하지않은 리액트 훅이다.
요점인 두 hook의 주요 차이점은 "실행 시점"이다

웹 페이지가 렌더링되는 과정은 크게 다음 세 가지 단계로 나눌 수 있는데

• 1. 레이아웃(Layout): 브라우저가 웹페이지의 각 요소가 화면의 어디에 위치해야 할지 계산하는 단계. 여기에서는 요소의 너비, 높이, 위치 등이 결정.
• 2. 페인팅(Paint): 레이아웃 단계에서 계산한 위치에 실제로 요소를 그리는 단계. 여기에서는 요소의 색상, 텍스트 색상, 그림자, 테두리 색상 등이 적용.
• 3. 합성(Compositing): 최종적으로 각 요소를 화면에 그리는 단계입니다.

이 두훅은 페인팅 전/후로 실행되며 "페인팅" 단계에서는 주로 요소의 스타일에 관련된 처리가 이루어지고, 이 단계가 끝나면 사용자는 브라우저에서 웹페이지를 볼 수 있다.

useEffect는 브라우저가 페인팅을 마친 후 비동기적으로 실행되지만, useLayoutEffect는 브라우저가 페인팅을 하기 전에 동기적으로 실행된다. 따라서 useEffect를 코드의 상단에 작성하여도 useLayoutEffect가 먼저 실행이된다.

useLayoutEffect는 동기적으로 실행되기 때문에 복잡한 연산을 수행하면 브라우저의 "렌더링 성능에 영향을 줄 수 있어" 비동기작업이나 무거운 연산의경우는 지양해야하며 다음과 같은 경우에 주로 사용된다:

• 컴포넌트가 화면에 그려진 직후에 DOM 요소의 크기나 위치를 측정해야 할 때
• '순간적인' 렌더링 이후 결과를 사용자에게 보여주기 전에 추가적인 변경을 즉시 수행해야 할 때 (예: 애니메이션)

useEffect를 우선적으로 사용해야하겠지만, 오늘 내가 마주한 상황은 사이드바를 만들때 uri의 쿼리스트링값에 따라 탭이 첫번째탭이아닌 두번째탭값이어야할때 첫 렌더링당시 탭스테이트를 쿼리스트링에따라 변경시켜 주는 작업이었는데 useEffect를 사용했을땐 깜빡임이 발생하여 이 훅을 처음 사용해보니 해결이 되었다.