vainilla extract CSS 요즘 이게 대세라며?

혹시 vainilla extract CSS 아시나요? 제가 프로젝트를 하면서 vainilla extract를 접하게 되었는데

기존에 있던 CSS 사용방법과 좋은 장점들로 나타나서 한번 소개를 해볼까 합니다.

 

우리가 알고 있는 styled-component 또는 emotion 등 많은 스타일등을 사용하는 CSS in JS라는 개념을

조금 알고 본론으로 들어가면 좋을 것 같습니다.

 

CSS-in-JS

CSS-in-Js는 간단하게 설명하자면 Javascript Code에서 CSS를 작성하는 방식입니다.

CSS 스타일을 추상화한 js 객체를 대신하여 CSS 스타일 문법을 그대로 사용하여 React style component로 사용

 

이러한 CSS-in-JS는 다음과 같은 장점을 가지고 있는데 ..

스타일을 지역 스코프로 지정하여 충돌을 걱정할 필요가 없다.
컴포넌트 레벨로 다루어 관리에 용이 ➡️ 다른 컴포넌트에 영향을 미치지 않음
Javascript 변수를 스타일에서 사용이 가능하다. 
javascript 와 css 사이의 상수 및 함수 교환 ➡️ 특정 컴포넌트에 종속되어 부작용 부담 없이 수정이 가능

.. 등등 아주 많은 장점을 보유하고 있습니다. ㅎㅎ 🤭

 

기본적으로 제가 생각한 CSS-in-JS에서 가장 큰 이점으로는 성능이 빠르다는 것인데 ..

기존의 스타일 방식으로는 페이지의 필요한 CSS를 처음부터 전체로 로디이하여서 스타일 태그를 생성을 하였지만

CSS-in-JS 방식으로 그때마다 필요한 스타일 태그를 최소한으로 생성하여서 성능적으로 빠름을 강조한다.

vainilla extract

이러한 vainilla extract는 CSS-in-JS 중 하나인 스타일 라이브러리입니다.

 

공식 문서를 보면 이러한 문구가 스타일 화면에 나타나고 있습니다.

All the styling APIs in Vanilla Extract take a style object as input. Describing styles as a JavaScript object enables much better use of TypeScript through your styling code, as the styles are typed data-structures like the rest of your application code. It also brings type-safety and autocomplete to CSS authoring

 

이 글을 해석을 해본다면 

Vanilla Extract의 모든 스타일링 API는 스타일 개체를 입력으로 사용하며 스타일을 JavaScript 개체로 설명하면 스타일

이 나머지 애플리케이션 코드와 마찬가지로 형식화된 데이터 구조이므로 스타일 코드를 통해 TypeScript를 훨씬 더 잘 사

용할 수 있으며 또한 CSS 작성에 유형 안전성과 자동 완성 기능을 제공한다.

 

모든 스타일의 빌드 타임에 생성을 하는 동시에 타입스크립트를 사용함으로 안전하게 스타일이 가능하다.
이러한 장점을 드러내고 있습니다.

 

 

이러한 라이브러리는 어떤 이점을 가져올까?

1. 타입스크립트 언어로 작성을 하기 때문에 오타의 발견을 쉽게 확인할 수 있다.
2. 빌드 타임에 스타일을 처리하기에 빠른 스타일 처리가 가능하다.

 

vainilla extract 사용 방법

 

설치법

npm install @vanilla-extract/css

 

NextJs 버전은 패키지 설치 이후에 next config를 수정해야 한다.

npm install --save-dev @vanilla-extract/next-plugin

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withVanillaExtract(nextConfig);

 

확장자 이름은 기존에 사용했던 style.js(ts)가 아닌 css.ts로 설정을 해야 한다.

 

그다음으로는 style 함수를 이용하여 import를 하고 다음 아래와 같이 사용을 할 수 있다.

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

export const TestCodeStyle = style({
  width: '100px';
  heigth: '100px';
  backgroundColor: 'black';
  position: 'relative'
});

 

또 tsx 파일을 작성을 하다 보면 동적으로 스타일을 관리하고 싶을 때가 있을 것이다.

그럴 경우에는 기존에 있었던 방식과는 조금 다르게 코드를 작성을 할 수 있는데 

 

기본적으로 제공하는 vanilla-extract creatVar라는 개념이 존재하는 동적으로 관리할 수 있다.

//css 파일
import { createVar, style } from '@vanilla-extract/css'; 

//ts 파일
import { assignInlineVars } from '@vanilla-extract/dynamic';

 

프로젝트를 하면서 적용한 코드를 간단하게 소개해드리겠습니다.

 

각각의 파일에 css, ts | tsx 파일에 import를 해준 다음에 style 지정을 assignInlineVars를 통하여 동적으로 관리하는데

여기서 css.ts에서 선언한 export const borderVar = createVar()를 통하여서 isSelect를 boolean을 통해 관리합니다.

 

 

더 자세하고 궁금한 내용은 공식 문서를 참고하면 좋을 것 같습니다.

createVar — vanilla-extract

 

느낀 점

사실 처음 쓰는 기술이라면 조금 어렵게 느껴질 수도 있지만 사용하다 보면 기존에 사용한 CSS 라이브러리보다 더 좋다고 느낄 수 있다. 스타일 구현이 타입스크립트로 사용된다는 것이 신기하다. 한번 사용을 해보는 것도 좋은 프로젝트의 경험이 될 것 같다.