[스파르타 문서 읽기] 9. useInsertionEffect

https://react.dev/reference/react/useInsertionEffect

useInsertionEffect – React

CSS-in-JS 라이브러리 개발자들을 위한 훅 - 아니면 그냥 useEffect나 useLayoutEffect 써라

아무 layout 이펙트가 있기 전에 DOM에 요소를 삽입할 수 있게 한다.

기본적인 동작은 useEffect 등과 비슷한데 실행 시점만 다른것 같다.

useInsertionEffect 내부에서 상태 업데이트를 할 수 없다.

useInsertionEffect가 실행될 때 ref는 아직 요소에 안 붙은 상태(null일 것임)

DOM 업데이트되는 특정 시점에 의존해서는 안된다 - 전/후에 모두 실행될 수 있음

다른 effect들은 모든 cleanup을 다 실행하고 setup을하는데, 이 훅은 하나의 컴포넌트에 대해서 cleanup하고 setup을 모두 실행한다.

CSS-in-JS를 하면 접근방식이 일반적으로 세가지가 있는데,

1. 컴파일러로 CSS 파일 정적 추출

2. 인라인 스타일

3. style 태그 런타임 주입

-> 일반적으로 1,2번의 조합을 추천하지만 3번을 해야한다면 useInsertionEffect와 함께 쓰기를 권장한다.

왜냐하면 리액트 라이프사이클과 맞춰서 이와 관련한 성능문제는 해결할 수 있기때문

 useInsertionEffect(() => {
    // As explained earlier, we don't recommend runtime injection of <style> tags.
    // But if you have to do it, then it's important to do in useInsertionEffect.
    if (!isInserted.has(rule)) {
      isInserted.add(rule);
      document.head.appendChild(getStyleForRule(rule));
    }
  });

useInsertionEffect는 컴포넌트에서 다른 Effect가 실행될 때 <style> 태그가 주입되어 있음을 보장하기 때문에 useLayoutEffect 또는 useEffect로 스타일을 주입하는 것보다 낫습니다. 그렇지 않으면 오래된 스타일로 인해 일반 Effects의 레이아웃 계산이 잘못될 수 있습니다.

딱히 쓸 일은 없을듯!