[Hook] useInsertionEffect

리액트 공식 문서를 참고한 정리 내용 (25.08 기준)

CSS-in-JS 라이브러리 작성자를 위한 것으로, 해당 라이브러리 작업 중에 스타일을 주입할 위치가 필요한 것이 아니라면 useEffect 혹은 useLayoutEffect를 사용하면 된다.

layout Effects 가 실행되기 전에 전체 요소를 DOM 에 주입 할 수 있다.

import { useInsertionEffect } from 'react';

// CSS-in-JS 라이브러리 안에서
function useCSS(rule) {
  useInsertionEffect(() => {
    // ... <style> 태그를 여기에서 주입하세요 ...
  });
  return rule;
}

useInsertionEffect를 호출하여 layout 을 읽어야하는 Effects 가 호출 되기 전에 스타일을 주입할 있다.

매개변수

setup(필수)

• 실제 실행할 코드가 들어가는 함수필요하다면 cleanup 함수를 반환해 정리 작업도 할 수 있음
• 실행 시점: 컴포넌트가 DOM에 추가되기 직전 /layout Effects 실행 전

dependencies(선택)

• setup 안에서 쓰이는 state, props 같은 반응형 값들을 배열에 넣음
• 배열 안 값이 바뀌면 → 이전 cleanup 실행 → 새 setup 실행
• 배열을 안 쓰면 → 리렌더링마다 매번 실행됨

--

반환값

useInsertionEffect는 undefined를 반환한다.

--

주의사항

• 이펙트는 클라이언트에서만 실행되며. 서버 렌더링 중에는 실행되지 않는다.
• useInsertionEffect 내부에서는 상태를 업데이트할 수 없다.
• useInsertionEffect가 실행되는 시점에 ref는 아직 연결되지 않는다.
• useInsertionEffect 는 DOM의 업데이트 전/후에 실행되며, DOM이 업데이트 되는 특정시점에 의존해서는 안 된다
• 매번 모든 cleanup 을 실행하고 setup 하는 다른 Effects 와 달리, useInsertionEffect 는 하나의 컴포넌트에 대해 cleanup 과 setup 을 모두 실행한다. 그 결과 cleanup 과 setup 이 ‘interleaving’ 된다.