📚 Reference

• 공식 문서 1

📜 Chapter

useEffect

useLayoutEffect

styled-components

‣

useInsertionEffect

• useInsertionEffect
• useInsertionEffect는 CSS-in-JS 라이브러리 제작자를 위해 특별히 설계된 React 훅이다.
• 이 훅은 일반적인 useEffect나 useLayoutEffect보다 더 이른 시점에 실행되어, DOM이 변경되기 전에 동적으로 CSS를 삽입할 수 있게 해준다.
• useInsertionEffect는 CSS-in-JS 라이브러리 작성자를 위한 것이다.
• CSS-in-JS 라이브러리를 개발 중이고 스타일을 삽입할 곳이 필요하지 않다면 useEffect 또는 useLayoutEffect를 사용하는 것이 좋다.

역할

• 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 라이브러리의 내부 로직에서 사용된다.