StyleX 소개하기(feat. Next.js)

StyleX

 

최근 웹 개발에서 스타일링을 위한 기술은 빠르게 발전하고 있으며, 그중에서도 Meta(Facebook)가 개발한 StyleX는 성능 최적화와 유지보수를 쉽게 하기 위한 정적 컴파일 기반 스타일링을 제공하는 흥미로운 접근 방식을 보여주고 있습니다.

CSS-in-JS vs StyleX: 차이점은 무엇일까?

기존 CSS-in-JS 솔루션들은 컴포넌트별 스타일을 쉽게 관리하고 동적인 스타일링을 가능하게 해주는 장점을 가지고 있습니다.
대표적인 예로는 styled-components, Emotion 등이 있으며, 각기 다른 방식으로 컴포넌트의 스타일을 JavaScript 코드에 통합해 편리함을 제공해 왔습니다.
그러나 CSS-in-JS는 런타임에서 스타일을 생성하고 주입하는 과정에서 성능 저하나 FOUC(Flash of Unstyled Content) 같은 문제를 야기할 수 있다는 단점도 있었습니다.

StyleX는 런타임에서 발생하는 성능 저하와 FOUC 문제를 해결하기 위해 등장한 새로운 접근 방식입니다.
StyleX는 정적 컴파일 기반으로 동작하여, 런타임 비용을 줄이고 더욱 최적화된 스타일 관리 방식을 제공합니다.

1. 정적 스타일 컴파일

기존 CSS-in-JS는 스타일이 컴포넌트와 함께 정의되고 런타임에 처리되었다면, StyleX는 빌드 타임에 스타일을 미리 컴파일하여 CSS로 추출합니다.
이는 FOUC 문제를 줄여주고, 번들 크기를 줄이며, 성능을 최적화하는 효과를 가져옵니다.

2. 간결한 클래스 이름 관리

StyleX는 CSS 클래스 이름을 짧고 고유한 형태로 컴파일하며, 이 과정을 자동화하여 개발자가 클래스 네이밍 규칙에 대해 걱정할 필요가 없습니다.
이로써 스타일의 중복 문제를 피하고, 최적화된 형태의 CSS를 생성합니다.
예를 들어, StyleX는 동일한 스타일을 여러 컴포넌트에서 사용할 때 자동으로 중복된 클래스를 합쳐주어, 불필요한 스타일이 번들에 포함되지 않도록 합니다.

3. CSS의 재사용성 및 모듈화

StyleX는 기존 CSS의 재사용성을 중시하며, 다른 CSS-in-JS보다 더 모듈화 된 접근을 지향합니다.
이로 인해 프로젝트 내의 스타일 충돌 가능성을 줄여주고, 유지보수를 더 쉽게 만들어줍니다.

StyleX의 장점

1. 성능 향상

StyleX는 빌드 타임에 스타일을 컴파일함으로써 런타임 비용을 최소화합니다.
이는 특히 큰 규모의 애플리케이션에서는 많은 컴포넌트와 스타일이 복잡하게 얽혀 있어, 런타임 스타일링으로 인한 성능 저하가 큰 문제가 될 수 있습니다.
StyleX는 이러한 애플리케이션에서 빌드 타임 컴파일을 통해 초기 렌더링 성능을 높이고, 런타임 오버헤드를 줄여주는 중요한 성능 이점을 제공합니다.
스타일이 컴포넌트와 함께 동적으로 생성되지 않기 때문에, 초기 렌더링 시 시간이 절약되고 FOUC 문제도 방지됩니다.

2. 작은 번들 크기

빌드 타임 컴파일을 통해 필요한 스타일만 포함하게 되므로, 불필요한 스타일이 번들에 포함되지 않습니다.
결과적으로 번들 크기가 작아지고, 로딩 시간이 단축됩니다.

3. 유지보수 용이성

간결하고 자동화된 클래스 이름과 정적 스타일 파일을 통해 코드의 가독성과 유지보수성이 크게 향상됩니다.
컴포넌트별로 스타일을 명확하게 분리하고 관리할 수 있어 스타일의 변경이나 업데이트가 쉽습니다.

StyleX의 단점

1. 제한된 동적 스타일링

빌드 타임에 컴파일되는 방식으로 인해 동적 스타일링에 제약이 생길 수 있습니다.
기존 CSS-in-JS 솔루션들이 런타임에서 JavaScript 변수와 조건을 통해 다양한 동적 스타일을 처리할 수 있는 것에 비해, StyleX는 이러한 부분에서 제한적일 수 있습니다.

2. 초기 학습 곡선

기존 CSS-in-JS 라이브러리들에 익숙한 개발자라면 StyleX의 새로운 패러다임에 적응하는 데 시간이 필요할 수 있습니다.
예를 들어, 빌드 타임 컴파일 개념에 익숙하지 않은 개발자들은 스타일 변경 시 즉각적인 반영을 확인하기 어려울 수 있으며, 정적 스타일링 방식에서 동적 스타일링으로 전환하는 과정에서 어려움을 겪을 수 있습니다.
특히, 빌드 타임에 컴파일된다는 개념과 특정 API 사용법에 익숙해지기 위해서는 추가 학습이 필요합니다.

3. SWC 대신 Babel 사용 필요

Next.js와 함께 StyleX를 사용할 때 SWC 대신 Babel을 사용해야 합니다.
SWC는 Rust로 작성되어 Babel보다 빌드 속도가 훨씬 빠르며, 특히 대규모 프로젝트에서 빌드 시간을 단축하는 데 큰 장점을 가지고 있습니다.
그러나 StyleX는 Babel 플러그인에 의존하기 때문에, 이를 사용하려면 SWC 대신 Babel로 설정을 변경해야 합니다.
이는 일부 개발자에게 빌드 속도 저하나 기존 설정 변경의 불편함을 초래할 수 있습니다.

Next.js App Router에서 StyleX 사용 예시

이제 실제로 StyleX를 Next.js의 App Router와 함께 사용하는 방법을 살펴보겠습니다.
Next.js 프로젝트에서 StyleX를 사용하면 컴포넌트 스타일링과 페이지 스타일을 간결하게 관리할 수 있습니다.

// pages/app/page.js
import * as stylex from '@stylexjs/stylex';

// 스타일 정의
const styles = stylex.create({
  container: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    backgroundColor: '#f0f0f0',
  },
  heading: {
    fontSize: '2rem',
    color: '#333',
  },
});

export default function HomePage() {
  return (
    <div className={stylex(styles.container)}>
      <h1 className={stylex(styles.heading)}>Welcome to Next.js with stylex!</h1>
    </div>
  );
}

 

위 예제에서 StyleX는 빌드 시 CSS를 컴파일하고 최적화하여 페이지에 적용됩니다.
컴포넌트마다 필요한 스타일만 정의하고 이를 간결하게 관리할 수 있으며, 전체적인 성능과 코드의 가독성 모두에서 이점을 누릴 수 있습니다.

설치 및 설정

Next.js 프로젝트에서 StyleX를 사용하려면 StyleX 패키지를 설치하고 Babel 플러그인을 설정해야 합니다.

 

1. 패키지 설치

npm install --save @stylexjs/stylex
npm install --save-dev @stylexjs/nextjs-plugin @stylexjs/babel-plugin rimraf

 

2. Package 스크립트 설정

// package.json
{
  "scripts": {
    ...,
    "predev": "rimraf .next",
    "prebuild": "rimraf .next"
  }
}

 

3. Babel 설정 (.babelrc.js)

// .babelrc.js
module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: __dirname,
        },
      },
    ],
  ],
};

 

4. next.config.js 설정

// next.config.mjs
/** @type {import('next').NextConfig} */
import stylexPlugin from "@stylexjs/nextjs-plugin";

const nextConfig = {};

const __dirname = new URL(".", import.meta.url).pathname;
export default stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

이렇게 설정하면 Next.js와 StyleX가 잘 통합되어, 빌드 시 스타일을 최적화하여 사용할 수 있습니다.

stylex는 기존 CSS-in-JS의 런타임 비용 문제와 성능 이슈를 해결하고자 하는 새로운 접근 방식으로, 정적 컴파일을 통한 최적화된 스타일링을 제공합니다.
성능 향상과 번들 크기 감소 등의 이점을 제공하지만, 동적 스타일링에 대한 제한이 있을 수 있어 사용 시 주의가 필요합니다.
Next.js와 함께 StyleX를 사용하면 스타일링의 가독성과 성능 모두를 극대화할 수 있으며, 특히 대규모 애플리케이션에서 효과적입니다.
다만 지금은 SWC대신 Babel을 사용해야 되기 때문에 장단점을 고려해서 선택해 사용하시기 바랍니다.