React에서의 useEffect 훅 변형

useEffect 훅에는 더욱 특수하고 매우 드물게 사용되는 변형들이 있으며, 따라서 우리는 그것들에 대해 간략히 살펴보겠습니다.

첫 번째 변형은 브라우저가 화면을 다시 그리기 *전에* 실행되는 useLayoutEffect 훅입니다. 이 기능은 다른 요소들에 따라 컴포넌트의 크기와 위치를 계산하여 브라우저가 렌더링할 때 바로 필요한 곳에 필요한 모습으로 표시되도록 하는 데 사용할 수 있습니다. 이를 통해, 예를 들어, 사용자는 위치나 크기 변경 시 컴포넌트의 중간 점프 과정을 보지 않고 최종 버전만 보게 됩니다.

두 번째 변형은 DOM 트리에 어떤 변화도 일어나기 전, 즉 아직 refs가 부착되지 않고 DOM이 업데이트되지 않은 시점에 실행되는 useInsertionEffect 훅입니다. 주로 DOM 변경 전에 CSS-in-JS 라이브러리로부터 동적 스타일을 삽입해야 하는 곳에 적용됩니다.