React useInsertionEffect: 성능 최적화를 위한 CSS-in-JS 라이브러리

React의 useInsertionEffect는 특정 상황, 특히 CSS-in-JS 라이브러리로 작업할 때 발생하는 특정 성능 병목 현상을 해결하기 위해 설계된 비교적 새로운 훅입니다. 이 글은 useInsertionEffect의 목적, 작동 방식, 그리고 CSS-in-JS 라이브러리의 성능 향상 및 레이아웃 스래싱 감소를 위해 어떻게 사용할 수 있는지에 대한 포괄적인 가이드를 제공합니다. 여기에 담긴 정보는 성능에 민감한 애플리케이션을 개발하거나 웹 애플리케이션의 체감 성능을 개선하고자 하는 모든 React 개발자에게 중요합니다.

문제 이해하기: CSS-in-JS와 레이아웃 스래싱

CSS-in-JS 라이브러리는 JavaScript 코드 내에서 CSS 스타일을 관리하는 강력한 방법을 제공합니다. 대표적인 예는 다음과 같습니다:

• styled-components
• Emotion
• stitches

이러한 라이브러리들은 일반적으로 컴포넌트의 props와 state를 기반으로 동적으로 CSS 규칙을 생성하는 방식으로 작동합니다. 이 접근 방식은 뛰어난 유연성과 조합성을 제공하지만, 신중하게 다루지 않으면 성능 문제를 야기할 수 있습니다. 주요 우려 사항은 레이아웃 스래싱(layout thrashing)입니다.

레이아웃 스래싱이란 무엇인가?

레이아웃 스래싱은 브라우저가 단일 프레임 내에서 레이아웃(페이지 요소의 위치와 크기)을 여러 번 다시 계산해야 할 때 발생합니다. 이는 JavaScript 코드가 다음과 같은 작업을 수행할 때 일어납니다:

1. DOM을 수정합니다.
2. 즉시 레이아웃 정보를 요청합니다 (예: offsetWidth, offsetHeight, getBoundingClientRect).
3. 그러면 브라우저는 레이아웃을 다시 계산합니다.

이 순서가 동일한 프레임 내에서 반복적으로 발생하면, 브라우저는 레이아웃 재계산에 상당한 시간을 소비하게 되어 다음과 같은 성능 문제를 초래합니다:

• 느린 렌더링
• 끊기는 애니메이션
• 나쁜 사용자 경험

CSS-in-JS 라이브러리는 React가 컴포넌트의 DOM 구조를 업데이트한 후에 DOM에 CSS 규칙을 주입하는 경우가 많기 때문에 레이아웃 스래싱을 유발할 수 있습니다. 이는 특히 스타일이 요소의 크기나 위치에 영향을 미칠 때 레이아웃 재계산을 촉발할 수 있습니다. 과거에는 라이브러리들이 스타일을 추가하기 위해 종종 useEffect를 사용했는데, 이는 브라우저가 이미 페인팅을 마친 후에 발생합니다. 이제 우리에게는 더 나은 도구가 있습니다.

useInsertionEffect 소개

useInsertionEffect는 이 특정 성능 문제를 해결하기 위해 설계된 React 훅입니다. 이 훅을 사용하면 브라우저가 페인팅하기 전, 하지만 DOM이 업데이트된 후에 코드를 실행할 수 있습니다. 이는 CSS-in-JS 라이브러리가 브라우저의 초기 레이아웃 계산 수행 전에 CSS 규칙을 주입할 수 있게 해주어 레이아웃 스래싱을 최소화하므로 매우 중요합니다. useLayoutEffect의 더 전문화된 버전이라고 생각할 수 있습니다.

useInsertionEffect의 주요 특징:

• 페인팅 전에 실행: 이 효과는 브라우저가 화면을 페인팅하기 전에 실행됩니다.
• 제한된 범위: 주로 스타일 주입을 위해 사용되며, 지정된 범위를 벗어난 DOM 변경은 예기치 않은 결과나 문제를 일으킬 수 있습니다.
• DOM 변경 후 실행: 이 효과는 React에 의해 DOM이 변경된 후에 실행됩니다.
• 서버 사이드 렌더링(SSR): 서버 사이드 렌더링 중에는 서버에서 실행되지 않습니다. 이는 서버 사이드 렌더링이 페인팅이나 레이아웃 계산을 포함하지 않기 때문입니다.

useInsertionEffect의 작동 방식

useInsertionEffect가 성능에 어떻게 도움이 되는지 이해하려면 React 렌더링 생명주기를 이해하는 것이 중요합니다. 다음은 간략한 개요입니다:

1. 렌더 단계: React는 컴포넌트의 state와 props를 기반으로 DOM에 어떤 변경이 필요한지 결정합니다.
2. 커밋 단계: React는 변경 사항을 DOM에 적용합니다.
3. 브라우저 페인트: 브라우저는 레이아웃을 계산하고 화면을 페인팅합니다.

전통적으로 CSS-in-JS 라이브러리는 useEffect나 useLayoutEffect를 사용하여 스타일을 주입했습니다. useEffect는 브라우저가 페인팅한 후에 실행되므로, 스타일이 적용되지 않은 콘텐츠가 잠시 보이는 현상(FOUC)과 잠재적인 레이아웃 스래싱을 유발할 수 있습니다. useLayoutEffect는 브라우저가 페인팅하기 전, 하지만 DOM 변경 후에 실행됩니다. useLayoutEffect가 스타일 주입에 useEffect보다 일반적으로 더 낫지만, DOM이 업데이트된 후 그리고 초기 페인트 전에 브라우저가 레이아웃을 다시 계산하도록 강제하기 때문에 여전히 레이아웃 스래싱에 기여할 수 있습니다.

useInsertionEffect는 브라우저가 페인팅하기 전, 하지만 DOM 변경 후 그리고 useLayoutEffect 전에 실행되어 이 문제를 해결합니다. 이를 통해 CSS-in-JS 라이브러리는 브라우저가 초기 레이아웃 계산을 수행하기 전에 스타일을 주입할 수 있어, 후속 재계산의 필요성을 최소화합니다.

실용적인 예제: CSS-in-JS 컴포넌트 최적화

my-css-in-js라는 가상의 CSS-in-JS 라이브러리를 사용한 간단한 예제를 살펴보겠습니다. 이 라이브러리는 DOM에 CSS 규칙을 주입하는 injectStyles라는 함수를 제공합니다.

단순한 구현 (useEffect 사용):

            
import React, { useEffect } from 'react';
import { injectStyles } from 'my-css-in-js';

const MyComponent = ({ color }) => {
  useEffect(() => {
    const styles = `
      .my-component {
        color: ${color};
        font-size: 16px;
      }
    `;
    injectStyles(styles);
  }, [color]);

  return <div className="my-component">Hello, world!</div>;
};

export default MyComponent;

            

              
                Copy
              
            
          

이 구현은 useEffect를 사용하여 스타일을 주입합니다. 작동은 하지만, FOUC 현상과 잠재적인 레이아웃 스래싱을 유발할 수 있습니다.

최적화된 구현 (useInsertionEffect 사용):

            
import React, { useInsertionEffect } from 'react';
import { injectStyles } from 'my-css-in-js';

const MyComponent = ({ color }) => {
  useInsertionEffect(() => {
    const styles = `
      .my-component {
        color: ${color};
        font-size: 16px;
      }
    `;
    injectStyles(styles);
  }, [color]);

  return <div className="my-component">Hello, world!</div>;
};

export default MyComponent;

            

              
                Copy
              
            
          

useInsertionEffect로 전환함으로써, 스타일이 브라우저 페인팅 전에 주입되도록 보장하여 레이아웃 스래싱의 가능성을 줄입니다.

모범 사례 및 고려 사항

useInsertionEffect를 사용할 때, 다음의 모범 사례와 고려 사항을 염두에 두십시오:

• 스타일 주입에만 사용하세요: useInsertionEffect는 주로 스타일 주입을 위해 설계되었습니다. 다른 종류의 부수 효과에 사용하는 것은 예기치 않은 동작을 유발할 수 있으므로 피해야 합니다.
• 부수 효과 최소화: useInsertionEffect 내의 코드를 가능한 한 최소화하고 효율적으로 유지하세요. 렌더링 과정을 늦출 수 있는 복잡한 계산이나 DOM 조작을 피해야 합니다.
• 실행 순서 이해: useInsertionEffect는 useLayoutEffect보다 먼저 실행된다는 점을 인지해야 합니다. 이들 효과 간에 의존성이 있는 경우 중요할 수 있습니다.
• 철저한 테스트: useInsertionEffect가 스타일을 올바르게 주입하고 성능 저하를 일으키지 않는지 확인하기 위해 컴포넌트를 철저히 테스트하세요.
• 성능 측정: 브라우저 개발자 도구를 사용하여 useInsertionEffect의 성능 영향을 측정하세요. useInsertionEffect 사용 여부에 따른 컴포넌트 성능을 비교하여 이점을 제공하는지 확인하세요.
• 서드파티 라이브러리 유의: 서드파티 CSS-in-JS 라이브러리를 사용할 때, 내부적으로 useInsertionEffect를 이미 활용하고 있는지 확인하세요. 만약 그렇다면, 컴포넌트에서 직접 사용할 필요가 없을 수 있습니다.

실제 사례 및 사용 예시

이전 예제는 기본적인 사용 사례를 보여주었지만, useInsertionEffect는 더 복잡한 시나리오에서 특히 유용할 수 있습니다. 다음은 몇 가지 실제 사례 및 사용 예시입니다:

• 동적 테마 적용: 애플리케이션에 동적 테마를 구현할 때, useInsertionEffect를 사용하여 브라우저가 페인팅하기 전에 테마별 스타일을 주입할 수 있습니다. 이는 레이아웃 시프트 없이 테마가 부드럽게 적용되도록 보장합니다.
• 컴포넌트 라이브러리: 컴포넌트 라이브러리를 구축하는 경우, useInsertionEffect를 사용하면 다른 애플리케이션에서 컴포넌트를 사용할 때 성능을 향상시킬 수 있습니다. 스타일을 효율적으로 주입함으로써 전체 애플리케이션 성능에 미치는 영향을 최소화할 수 있습니다.
• 복잡한 레이아웃: 대시보드나 데이터 시각화와 같이 복잡한 레이아웃을 가진 애플리케이션에서, useInsertionEffect는 빈번한 스타일 업데이트로 인한 레이아웃 스래싱을 줄이는 데 도움이 될 수 있습니다.

예제: useInsertionEffect를 사용한 동적 테마 적용

사용자가 라이트 테마와 다크 테마 간에 전환할 수 있는 애플리케이션을 생각해 보겠습니다. 테마 스타일은 별도의 CSS 파일에 정의되고 useInsertionEffect를 사용하여 DOM에 주입됩니다.

            
import React, { useInsertionEffect, useState } from 'react';
import { injectStyles } from 'my-css-in-js';

const themes = {
  light: `
    body {
      background-color: #fff;
      color: #000;
    }
  `,
  dark: `
    body {
      background-color: #000;
      color: #fff;
    }
  `,
};

const ThemeSwitcher = () => {
  const [theme, setTheme] = useState('light');

  useInsertionEffect(() => {
    injectStyles(themes[theme]);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <div>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <p>Current Theme: {theme}</p>
    </div>
  );
};

export default ThemeSwitcher;

            

              
                Copy
              
            
          

이 예제에서 useInsertionEffect는 브라우저가 페인팅하기 전에 테마 스타일이 주입되도록 보장하여, 눈에 띄는 레이아웃 시프트 없이 부드러운 테마 전환을 가능하게 합니다.

useInsertionEffect를 사용하지 말아야 할 때

useInsertionEffect는 CSS-in-JS 라이브러리를 최적화하는 데 유용한 도구일 수 있지만, 이것이 필요하지 않거나 부적절한 경우를 인지하는 것이 중요합니다:

• 단순한 애플리케이션: 스타일링이 최소화되거나 스타일 업데이트가 드문 단순한 애플리케이션에서는 useInsertionEffect의 성능 이점이 미미할 수 있습니다.
• 라이브러리가 이미 최적화를 처리하는 경우: 많은 최신 CSS-in-JS 라이브러리는 이미 내부적으로 useInsertionEffect를 사용하거나 다른 최적화 기술을 갖추고 있습니다. 이 경우, 컴포넌트에서 직접 사용할 필요가 없을 수 있습니다.
• 스타일과 관련 없는 부수 효과: useInsertionEffect는 스타일 주입을 위해 특별히 설계되었습니다. 다른 종류의 부수 효과에 사용하는 것은 예기치 않은 동작을 유발할 수 있으므로 피해야 합니다.
• 서버 사이드 렌더링: 이 효과는 페인팅이 없으므로 서버 사이드 렌더링 중에는 실행되지 않습니다.

useInsertionEffect의 대안

useInsertionEffect는 강력한 도구이지만, CSS-in-JS 라이브러리를 최적화하기 위해 고려할 수 있는 다른 접근 방식도 있습니다:

• CSS 모듈: CSS 모듈은 CSS 규칙을 컴포넌트에 로컬로 범위 지정하여 전역 네임스페이스 충돌을 피하는 방법을 제공합니다. CSS-in-JS 라이브러리와 동일한 수준의 동적 스타일링을 제공하지는 않지만, 더 간단한 스타일링 요구에는 좋은 대안이 될 수 있습니다.
• 아토믹 CSS: 아토믹 CSS(유틸리티 우선 CSS라고도 함)는 요소 스타일링을 위해 함께 구성할 수 있는 작고 단일 목적의 CSS 클래스를 만드는 것을 포함합니다. 이 접근 방식은 더 효율적인 CSS와 코드 중복 감소로 이어질 수 있습니다.
• 최적화된 CSS-in-JS 라이브러리: 일부 CSS-in-JS 라이브러리는 성능을 염두에 두고 설계되었으며 CSS 추출 및 코드 분할과 같은 내장 최적화 기술을 제공합니다. 성능 요구 사항에 맞는 라이브러리를 연구하고 선택하세요.

결론

useInsertionEffect는 React 애플리케이션에서 CSS-in-JS 라이브러리를 최적화하고 레이아웃 스래싱을 최소화하는 데 유용한 도구입니다. 작동 방식과 사용 시점을 이해함으로써 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있습니다. 스타일 주입에만 사용하고, 부수 효과를 최소화하며, 컴포넌트를 철저히 테스트하는 것을 기억하세요. 신중한 계획과 구현을 통해 useInsertionEffect는 부드럽고 반응성이 뛰어난 사용자 경험을 제공하는 고성능 React 애플리케이션을 구축하는 데 도움이 될 수 있습니다.

이 글에서 논의된 기술들을 신중하게 고려함으로써, CSS-in-JS 라이브러리와 관련된 문제들을 효과적으로 해결하고, 여러분의 React 애플리케이션이 전 세계 사용자들에게 부드럽고, 반응성이 뛰어나며, 성능 좋은 경험을 제공하도록 보장할 수 있습니다.