useInsertionEffect

티스토리 뷰

web/react hook

useInsertionEffect

dev_been94 2024. 12. 14. 12:07

728x90

🎯 useInsertionEffect란 무엇일까?

**useInsertionEffect**는 React 18부터 등장한 특수한 훅이에요.
주로 CSS-in-JS 라이브러리나 스타일링 관련 코드를 다룰 때 사용해요.

이 훅의 핵심 역할은 **"DOM이 업데이트되기 전에 스타일 같은 부가 작업을 먼저 수행하는 것"**이에요.
간단히 말해, 화면에 그려지기 직전에 미리 필요한 작업(스타일 삽입 등)을 할 수 있게 도와줘요.

🧵 실생활 비유: 옷 입히기

옷을 입을 때를 생각해볼까요? 👗

화면에 요소(사람)가 그려지기 전에 옷(스타일)을 미리 입혀야 깔끔하게 보이겠죠?
만약 옷을 입히는 타이밍이 늦어서 화면에 요소가 먼저 나타나버리면, 잠깐이라도 스타일이 적용되지 않은 모습이 보일 수 있어요.

**useInsertionEffect**는 이런 상황을 방지하고, 화면이 그려지기 전에 스타일이 먼저 적용될 수 있도록 도와주는 역할을 해요.

🛠️ useInsertionEffect 사용 예시

React에서 useInsertionEffect를 사용하는 간단한 코드 예시를 보여드릴게요.

🧩 CSS 삽입 시나리오

useInsertionEffect를 사용해서 화면이 그려지기 전에 CSS 스타일을 동적으로 삽입하는 예제예요.

import React, { useInsertionEffect, useState } from "react";

function StyledBox() {
  const [color, setColor] = useState("blue");

  // 화면이 그려지기 전에 스타일을 추가
  useInsertionEffect(() => {
    const style = document.createElement("style");
    style.innerHTML = `
      .dynamic-box {
        width: 200px;
        height: 200px;
        background-color: ${color};
        border: 2px solid black;
      }
    `;
    document.head.appendChild(style); // 스타일을 <head>에 추가
    return () => {
      document.head.removeChild(style); // 정리(clean-up) 작업
    };
  }, [color]); // color 값이 바뀔 때마다 실행

  return (
    <div>
      <div className="dynamic-box"></div>
      <button onClick={() => setColor("red")}>빨간색으로 변경</button>
      <button onClick={() => setColor("green")}>초록색으로 변경</button>
    </div>
  );
}

export default StyledBox;

🔍 코드에서 무슨 일이 일어날까요?

useInsertionEffect
- 이 훅은 DOM이 그려지기 직전에 실행돼요.
- 스타일(<style>)을 <head> 태그에 미리 삽입해서 화면에 표시될 때 스타일이 이미 적용된 상태를 유지해요.
동적 스타일 추가
- 버튼을 클릭하면 color 값이 바뀌고, 새로운 스타일이 적용됩니다.
- 화면이 깜빡이거나 스타일이 늦게 적용되지 않도록 미리 CSS를 삽입해요.
정리 작업
- 컴포넌트가 업데이트되거나 사라질 때 기존의 <style> 태그를 제거합니다.

🧩 useEffect와 useInsertionEffect의 차이점은?

useEffect:
- 화면이 렌더링된 후 실행돼요.
- 스타일 삽입 같은 작업을 하면 잠깐 스타일이 적용되지 않은 모습이 보일 수 있어요.
useInsertionEffect:
- 화면이 그려지기 직전에 실행돼요.
- 스타일이 미리 적용되므로 화면이 깜빡이지 않아요.

🚀 언제 사용할까요?

CSS-in-JS 라이브러리:
- 스타일을 동적으로 삽입해야 할 때 사용해요.
- 예를 들어, styled-components나 emotion 같은 라이브러리를 만들 때 내부적으로 사용돼요.
성능 최적화:
- 화면 깜빡임이나 스타일 적용 지연을 막아야 할 때.

🌟 정리하자면!

useInsertionEffect는 화면이 그려지기 전에 실행되는 특수한 훅으로, 주로 스타일 삽입 작업에 사용됩니다.
이 덕분에 깜빡임 없이 부드럽게 스타일이 적용돼요!

728x90

'web > react hook' 카테고리의 다른 글

useMemo (2)	2024.12.14
useLayoutEffect (0)	2024.12.14
useImperativeHandle (0)	2024.12.14
useId (0)	2024.12.14
useEffect (1)	2024.12.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

250x250

JAM Development

티스토리 뷰

useInsertionEffect

🎯 useInsertionEffect란 무엇일까?

🧵 실생활 비유: 옷 입히기

🛠️ useInsertionEffect 사용 예시

🧩 CSS 삽입 시나리오

🔍 코드에서 무슨 일이 일어날까요?

🧩 useEffect와 useInsertionEffect의 차이점은?

🚀 언제 사용할까요?

🌟 정리하자면!

'web > react hook' 카테고리의 다른 글

티스토리툴바