📚 Reference

• 공식 문서 1

📜 Chapter

useEffect

useLayoutEffect

styled-components

‣

useInsertionEffect

• useInsertionEffect
• useInsertionEffect는 CSS-in-JS 라이브러리 제작자를 위해 특별히 설계된 React 훅이다.
• 이 훅은 일반적인 useEffect나 useLayoutEffect보다 더 이른 시점에 실행되어, DOM이 변경되기 전에 동적으로 CSS를 삽입할 수 있게 해준다.

역할

• useInsertionEffect의 핵심은 동기적으로 실행된다는 점이다. 이는 다음과 같은 중요한 문제를 해결한다.
  1. FOUC(Flash of Unstyled Content) 방지: 웹사이트가 잠시 스타일이 적용되지 않은 상태로 보이다가 뒤늦게 스타일이 나타나는 현상을 방지한다. useInsertionEffect는 컴포넌트가 화면에 그려지기 전에 CSS를 삽입하므로, 컴포넌트가 처음부터 올바른 스타일을 가진 채로 렌더링된다.
  2. 레이아웃 오류 방지: useLayoutEffect처럼 레이아웃을 측정하는 훅이 실행되기 전에 스타일이 먼저 적용되도록 보장한다. 이로써 잘못된 레이아웃 계산을 방지할 수 있다.
• 일반적인 useEffect는 모든 DOM 변경이 끝난 후 비동기적으로 실행되기 때문에, CSS 삽입에 사용하면 FOUC가 발생할 수 있다.
• 반면 useInsertionEffect는 DOM 변경 전에 동기적으로 실행되므로 CSS 삽입에 가장 적합하다.

사용 방법

• useInsertionEffect는 일반적인 개발자가 직접 사용할 일이 거의 없다. 주로 Emotion, styled-components와 같은 CSS-in-JS 라이브러리의 내부 로직에서 사용된다.
• 이 훅은 오직 클라이언트 측 렌더링에서만 실행됩니다. 서버 측 렌더링(SSR)에서는 실행되지 않는다.
• useInsertionEffect 안에서는 상태(state)를 업데이트하거나 DOM을 변경하는 등의 작업을 하면 안 된다. 오직 <style> 태그와 같은 요소를 DOM에 삽입하는 용도로만 사용해야 한다.