M

MLOG

한국어

CSS-in-JS 라이브러리 최적화를 위한 React의 useInsertionEffect 훅을 알아보세요. 성능 향상, 레이아웃 스래싱 감소, 일관된 스타일링을 보장하는 방법을 배울 수 있습니다.

React useInsertionEffect: CSS-in-JS 최적화의 혁신

React 생태계는 성능 병목 현상을 해결하고 개발자 경험을 향상시키기 위한 새로운 기능과 API가 등장하면서 끊임없이 진화하고 있습니다. 그중 하나가 React 18에 도입된 useInsertionEffect 훅입니다. 이 훅은 CSS-in-JS 라이브러리를 최적화하는 강력한 메커니즘을 제공하여, 특히 복잡한 애플리케이션에서 상당한 성능 향상을 이끌어냅니다.

CSS-in-JS란 무엇인가?

useInsertionEffect에 대해 알아보기 전에, CSS-in-JS에 대해 간단히 살펴보겠습니다. 이는 CSS 스타일을 JavaScript 컴포넌트 내에서 작성하고 관리하는 기술입니다. 기존의 CSS 스타일시트 대신, CSS-in-JS 라이브러리는 개발자가 React 코드 내에서 직접 스타일을 정의할 수 있게 해줍니다. 인기 있는 CSS-in-JS 라이브러리는 다음과 같습니다:

CSS-in-JS는 여러 가지 이점을 제공합니다:

하지만 CSS-in-JS는 성능 문제를 야기하기도 합니다. 렌더링 중에 CSS를 동적으로 주입하면 레이아웃 스래싱(layout thrashing)이 발생할 수 있는데, 이는 스타일 변경으로 인해 브라우저가 반복적으로 레이아웃을 다시 계산하는 현상입니다. 이로 인해 특히 저사양 기기나 깊게 중첩된 컴포넌트 트리를 가진 애플리케이션에서 버벅이는 애니메이션과 좋지 않은 사용자 경험을 초래할 수 있습니다.

레이아웃 스래싱(Layout Thrashing) 이해하기

레이아웃 스래싱은 JavaScript 코드가 스타일 변경 후, 브라우저가 레이아웃을 다시 계산할 기회를 갖기 전에 레이아웃 속성(예: offsetWidth, offsetHeight, scrollTop)을 읽을 때 발생합니다. 이는 브라우저가 동기적으로 레이아웃을 다시 계산하도록 강제하여 성능 병목 현상을 유발합니다. CSS-in-JS의 맥락에서는, 렌더링 단계에서 스타일이 DOM에 주입되고, 이후 계산이 업데이트된 레이아웃에 의존할 때 자주 발생합니다.

다음의 간단한 예시를 살펴보겠습니다:

function MyComponent() {
  const [width, setWidth] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    // 동적으로 CSS 주입 (예: styled-components 사용)
    ref.current.style.width = '200px';

    // 스타일 변경 직후 레이아웃 속성 읽기
    setWidth(ref.current.offsetWidth);
  }, []);

  return 
My Element
;
}

이 시나리오에서는 width 스타일이 설정된 직후에 offsetWidth를 읽습니다. 이는 동기적인 레이아웃 계산을 트리거하여 잠재적으로 레이아웃 스래싱을 유발할 수 있습니다.

useInsertionEffect 소개

useInsertionEffect는 CSS-in-JS 라이브러리에서 동적 CSS 주입과 관련된 성능 문제를 해결하기 위해 설계된 React 훅입니다. 이를 통해 브라우저가 화면을 그리기 *전*에 DOM에 CSS 규칙을 삽입할 수 있어, 레이아웃 스래싱을 최소화하고 더 부드러운 렌더링 경험을 보장합니다.

useInsertionEffect와 useEffect, useLayoutEffect와 같은 다른 React 훅과의 주요 차이점은 다음과 같습니다:

useInsertionEffect를 사용함으로써, CSS-in-JS 라이브러리는 렌더링 파이프라인의 초기 단계에서 스타일을 주입하여 브라우저가 레이아웃 계산을 최적화하고 레이아웃 스래싱의 가능성을 줄일 시간을 더 많이 확보할 수 있습니다.

useInsertionEffect 사용 방법

useInsertionEffect는 일반적으로 CSS-in-JS 라이브러리 내에서 DOM에 CSS 규칙을 삽입하는 것을 관리하기 위해 사용됩니다. 자신만의 CSS-in-JS 솔루션을 구축하는 경우가 아니라면, 애플리케이션 코드에서 직접 사용하는 경우는 거의 없습니다.

CSS-in-JS 라이브러리가 useInsertionEffect를 어떻게 사용할 수 있는지에 대한 간단한 예시는 다음과 같습니다:

import * as React from 'react';

const styleSheet = new CSSStyleSheet();
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styleSheet];

function insertCSS(rule) {
  styleSheet.insertRule(rule, styleSheet.cssRules.length);
}

export function useMyCSS(css) {
  React.useInsertionEffect(() => {
    insertCSS(css);
  }, [css]);
}

function MyComponent() {
  useMyCSS('.my-class { color: blue; }');

  return 
Hello, World!
;
}

설명:

  1. 새로운 CSSStyleSheet가 생성됩니다. 이는 CSS 규칙을 관리하는 성능 좋은 방법입니다.
  2. 스타일시트가 문서에 채택되어 규칙이 활성화됩니다.
  3. useMyCSS 커스텀 훅은 CSS 규칙을 입력으로 받습니다.
  4. useInsertionEffect 내에서, insertCSS를 사용하여 CSS 규칙이 스타일시트에 삽입됩니다.
  5. 이 훅은 css 규칙에 의존하므로, 규칙이 변경될 때 다시 실행됩니다.

중요 고려사항:

useInsertionEffect 사용의 이점

useInsertionEffect의 주요 이점은 특히 CSS-in-JS에 크게 의존하는 애플리케이션에서의 성능 향상입니다. 렌더링 파이프라인의 더 이른 단계에서 스타일을 주입함으로써 레이아웃 스래싱을 완화하고 더 부드러운 사용자 경험을 보장하는 데 도움이 될 수 있습니다.

주요 이점을 요약하면 다음과 같습니다:

실제 사용 사례

애플리케이션 코드에서 useInsertionEffect를 직접 사용하는 것은 드물지만, CSS-in-JS 라이브러리 제작자에게는 매우 중요합니다. 이것이 생태계에 어떤 영향을 미치고 있는지 살펴보겠습니다.

Styled-components

가장 인기 있는 CSS-in-JS 라이브러리 중 하나인 Styled-components는 스타일 주입을 최적화하기 위해 내부적으로 useInsertionEffect를 채택했습니다. 이 변경으로 인해 styled-components를 사용하는 애플리케이션, 특히 복잡한 스타일링 요구 사항이 있는 애플리케이션에서 눈에 띄는 성능 향상이 있었습니다.

Emotion

또 다른 널리 사용되는 CSS-in-JS 라이브러리인 Emotion 또한 성능 향상을 위해 useInsertionEffect를 활용합니다. 렌더링 과정의 초기에 스타일을 주입함으로써 Emotion은 레이아웃 스래싱을 줄이고 전반적인 렌더링 속도를 개선합니다.

기타 라이브러리

다른 CSS-in-JS 라이브러리들도 성능상의 이점을 활용하기 위해 useInsertionEffect를 적극적으로 탐색하고 채택하고 있습니다. React 생태계가 발전함에 따라, 더 많은 라이브러리가 이 훅을 내부 구현에 통합할 것으로 예상됩니다.

언제 useInsertionEffect를 사용해야 하는가

앞서 언급했듯이, 일반적으로 애플리케이션 코드에서 useInsertionEffect를 직접 사용하지는 않습니다. 대신, 주로 CSS-in-JS 라이브러리 제작자들이 스타일 주입을 최적화하기 위해 사용합니다.

useInsertionEffect가 특히 유용한 몇 가지 시나리오는 다음과 같습니다:

useInsertionEffect의 대안

useInsertionEffect가 CSS-in-JS를 최적화하는 강력한 도구이긴 하지만, 스타일링 성능을 개선하기 위해 사용할 수 있는 다른 기술들도 있습니다.

CSS-in-JS 최적화를 위한 모범 사례

useInsertionEffect를 사용하든 안 하든, CSS-in-JS 성능을 최적화하기 위해 따를 수 있는 몇 가지 모범 사례가 있습니다:

결론

useInsertionEffect는 React 생태계에 가치 있는 추가 기능으로, CSS-in-JS 라이브러리를 최적화하는 강력한 메커니즘을 제공합니다. 렌더링 파이프라인의 초기 단계에서 스타일을 주입함으로써 레이아웃 스래싱을 완화하고 더 부드러운 사용자 경험을 보장하는 데 도움이 될 수 있습니다. 일반적으로 애플리케이션 코드에서 useInsertionEffect를 직접 사용하지는 않겠지만, 그 목적과 이점을 이해하는 것은 최신 React 모범 사례를 따라가는 데 중요합니다. CSS-in-JS가 계속 발전함에 따라, 전 세계 사용자에게 더 빠르고 반응성이 뛰어난 웹 애플리케이션을 제공하기 위해 더 많은 라이브러리가 useInsertionEffect 및 기타 성능 최적화 기술을 채택할 것으로 예상됩니다.

CSS-in-JS의 미묘한 차이를 이해하고 useInsertionEffect와 같은 도구를 활용함으로써, 개발자는 전 세계의 다양한 기기와 네트워크에서 뛰어난 사용자 경험을 제공하는 고성능 및 유지보수가 용이한 React 애플리케이션을 만들 수 있습니다. 항상 애플리케이션을 프로파일링하여 성능 병목 현상을 식별하고 해결하며, 끊임없이 진화하는 웹 개발 세계의 최신 모범 사례에 대한 정보를 지속적으로 얻는 것을 잊지 마세요.