[React] 바닐라 익스트랙트와 CSS

바닐라 익스트렉트(Vanilla Extract) 소개

바닐라 익스트렉트(Vanilla Extract)는 CSS를 JavaScript처럼 사용할 수 있는 CSS-in-JS 라이브러리입니다. 기존 CSS 작성 방식의 단점을 보완하고 JavaScript의 장점을 활용해 스타일링을 더욱 체계적이고 효율적으로 관리할 수 있도록 돕습니다.

 

이 라이브러리는 스프링클(Sprinkles), 디파인드 프러퍼티(DefineProperties) 등의 함수를 통해 스타일 속성을 선언하고 재사용할 수 있는 기능을 제공합니다. 이를 통해 CSS 클래스 이름 충돌, 코드 중복, 관리 어려움 같은 문제를 해결하며, 더 나아가 타입 안정성과 제로 런타임(zero runtime)이라는 강력한 특징을 제공합니다.

 

바닐라 익스트렉트의 장점

 

1. 제로 런타임

바닐라 익스트렉트는 런타임에 스타일을 처리하지 않습니다. 모든 스타일은 빌드 타임에 생성된 CSS 파일에 포함되므로, 실행 중인 브라우저에서 JavaScript 없이도 스타일이 적용됩니다. 이는 런타임 비용을 줄이고 성능을 개선합니다.

 

2. 타입 안정성(Type Safety)

타입스크립트(TypeScript)를 지원해 스타일 작성 시 타입 안정성을 제공합니다. 잘못된 CSS 클래스 이름이나 속성 값을 전달했을 때 컴파일 단계에서 에러를 발생시켜, 코드의 안정성을 높이고 디버깅 시간을 줄여줍니다.

 

3. 불가지론적(Agnostic)

특정 프레임워크에 종속되지 않고, React, Vue, Angular 등 어떤 환경에서도 사용할 수 있습니다. TS 파일을 통해 필요한 CSS 파일을 자동으로 생성하므로, 환경에 관계없이 쉽게 통합할 수 있습니다.

 

4. 유지보수 용이성

스타일을 JavaScript 또는 TypeScript 코드로 관리하기 때문에 컴포넌트 기반 개발에 적합합니다. 스타일 재사용, 테마 설정, 조건부 스타일링 등이 간편하며, 코드 스플리팅과 최적화 작업도 손쉽게 수행할 수 있습니다.

 

바닐라 익스트렉트의 단점

1. 학습 곡선

 

기존 CSS 방식에 익숙한 개발자라면, JavaScript 기반 스타일링 방식에 적응하는 데 시간이 걸릴 수 있습니다.

 

2. 빌드 설정 필요

 

바닐라 익스트렉트를 사용하려면 빌드 도구(Webpack, Vite 등)에 추가 설정이 필요합니다. 이 과정에서 처음 사용하는 개발자는 혼란을 겪을 수 있습니다.

 

바닐라 익스트렉트 사용 예시

다음은 바닐라 익스트렉트를 사용하여 버튼 스타일을 작성하는 간단한 예제입니다.

 

1. 설치

npm install @vanilla-extract/css

 

2. 스타일 작성

button.css.ts 파일에서 스타일을 작성합니다.

import { style } from '@vanilla-extract/css';

 

export const button = style({
  backgroundColor: '#6200ee',
  color: '#ffffff',
  padding: '10px 20px',
  borderRadius: '4px',
  border: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: '#3700b3',
  },
});

 

3. 스타일 적용

React 컴포넌트에서 스타일을 적용합니다.

import React from 'react';
import { button } from './button.css';

export const App = () => (
  <button className={button}>Click Me</button>
);

 

바닐라 익스트렉트의 활용 사례

1. 다크 모드와 테마 설정

바닐라 익스트렉트는 다양한 테마를 쉽게 정의하고 적용할 수 있어 다크 모드와 같은 사용자 정의 테마를 구현하기에 적합합니다.

 

2. 디자인 시스템

중앙 집중식으로 스타일을 관리할 수 있으므로 디자인 시스템을 구축하고 유지보수하는 데 유용합니다.

 

3. 대규모 프로젝트

타입 안정성과 제로 런타임 덕분에 대규모 프로젝트에서도 효율적이고 안전하게 스타일을 관리할 수 있습니다.

 

결론

바닐라 익스트렉트는 JavaScript 기반으로 스타일을 체계적으로 관리할 수 있도록 돕는 CSS-in-JS 라이브러리입니다. 제로 런타임, 타입 안정성, 프레임워크 독립성 등 여러 장점을 통해 개발 생산성과 코드 품질을 높여줍니다. 특히 대규모 프로젝트나 디자인 시스템 관리에 적합하며, 다양한 테마와 조건부 스타일링을 손쉽게 구현할 수 있습니다.

 

이러한 특성 덕분에 바닐라 익스트렉트는 현대 웹 개발에서 점점 더 중요한 도구로 자리 잡고 있습니다.