안녕하세요, 소플입니다.
올해 첫 매거진이었던 2023 JavaScript Rising Stars가 굉장히 많은 호응을 얻었는데요,
그 중 스타일링 부문에서 1위를 했던 했던 프로젝트가 있었습니다.

바로 메타(Meta)에서 개발한 StyleX 입니다.
이번 매거진에서는 바로 이 StyleX에 대해서 한 번 살펴보도록 하겠습니다.

---

금수저를 물고 태어난 오픈소스?!

StyleX는 작년 12월에 공개되었는데, 프로젝트가 공개되자마자 크게 주목을 받았습니다.
그 이유는 바로 메타(Meta)에서 개발한 오픈소스 프로젝트였기 때문이죠.

그리고 StyleX 공식 웹사이트에서는 아래 그림과 같이 페이스북, 인스타그램, 왓츠앱, 쓰레드를 구동하는 스타일링 시스템이라고 소개하고 있습니다.

"뭐? 페이스북, 인스타그램에서 쓰는 스타일링 시스템이라고?"

이러니 개발자들이 관심을 안 가질래야 안 가질 수가 없었겠죠.

아마 별로 유명하지 않은 사람이 만든 프로젝트였다면,
이렇게 짧은 기간에 큰 관심을 받진 못했을 것 같다는게 저의 개인적인 생각입니다ㅎㅎ

어찌됐든 StyleX는 메타(Meta)라는 금수저를 물고 태어난 오픈소스인데,
이름에서 알 수 있는 것처럼 스타일링을 위한 라이브러리입니다.

StyleX의 공식 GitHub 저장소에서는 StyleX를 아래와 같이 소개하고 있습니다.

StyleX is the styling system for ambitious user interfaces.

이 문장을 우리말로 번역해보면 대략 아래와 같은 뜻이 되겠죠.

StyleX는 야심찬 사용자 인터페이스를 위한 스타일링 시스템이다.

뭔가 아주 끝내주는(?) 스타일링 시스템인것 같기는 한데,
저는 처음에 야심차다는 부분이 과연 뭘 의미하는지 이해를 잘 하지 못했습니다.

그래서 조금 더 이해를 하기 위해 StyleX의 핵심 원칙(Core Principles) 을 살펴보기로 했습니다.

StyleX의 핵심 원칙 (https://stylexjs.com/docs/learn/thinking-in-stylex/)

위 링크에 나와 있는 StyleX의 핵심 원칙은 굉장이 양이 많습니다.
그래서 모든 원칙들을 다 다루기에는 너무 양이 많기 때문에,
여기서는 몇가지 중요한 핵심 원칙만을 소개하도록 하겠습니다.

같은 위치 (Co-location)

첫 번째 원칙은 마크업과 스타일을 같은 위치. 즉, 같은 파일에 위치시켜야 한다는 원칙입니다.

프론트엔드 개발을 하다보면 스타일과 마크업을 분리하는 경우가 많습니다.
또한 중복되는 코드를 줄이기 위해서 스타일들을 병합해서 관리하는 경우도 많죠.

StyleX는 이런 DRY 코드도 좋지만 스타일을 관리하는 측면에서는 항상 좋지는 않다고 말합니다.
스타일을 작성하는 가장 좋고 읽기 쉬운 방법은 스타일을 마크업과 동일한 파일에 작성하는 것이라는 것이죠.
그래서 StyleX는 같은 위치에서 스타일을 작성하고 적용 및 추론하도록 설계되었다고 합니다.

저도 개인적으로는 스타일을 마크업과 같은 파일에 넣는 것을 선호하는데,
이 원칙을 읽으면서 크게 공감을 했습니다.

NOTE. DRY 코드란?
DRY은 "Don't Repeat Yourself"의 약어로, 코드를 중복하지 말라는 소프트웨어 개발 원칙을 나타냅니다. 이 원칙은 동일한 코드 블록이나 로직을 반복 사용하는 것을 피하고, 대신에 재사용 가능한 코드를 작성하라는 것을 강조합니다. DRY 코드는 유지보수가 쉽고 오류가 적은 소프트웨어를 만드는 데 도움이 됩니다.

결정론적 해결 (Deterministic resolution)

두 번째 원칙은 스타일은 예측가능하고 결정적이어야 한다는 원칙입니다.

CSS가 강력한 기능을 제공하긴 하지만,
잘못 이해하고 사용하게 되면 쉽게 스타일이 깨질 수 있습니다.

그래서 하나의 컴포넌트에 여러 개의 CSS 파일들로부터 스타일이 복합적으로 적용된다면,
최종적으로 컴포넌트가 어떻게 렌더링 될지 예측하기가 쉽지 않습니다.

그래서 StyleX는 완전히 예측 가능하고 결정적인 스타일링 시스템을 제공합니다.
그리고 스타일링 시스템에 적용되는 원칙은 바로 아래와 같습니다.

"The last style applied always wins."

즉, 가장 마지막에 적용된 스타일이 무조건 적용된다는 것이죠.
아주 간단하죠?😀

적은 비용 추상화 (Low-cost abstractions)

세 번째 원칙은 저렴한 비용으로 추상화가 이뤄져야 한다는 원칙입니다.

여기서 말하는 비용(cost)는 컴퓨터공학에서 말하는 Computation Cost라고 이해하면 됩니다.
즉, 최대한 컴퓨팅 파워를 적게 들이면서 스타일을 적용해야 한다는 것이죠.

그래서 StyleX는 런타임 성능을 향상시키기 위해서 빌드 타임에 더 많은 작업을 수행합니다.

예를 들면, 아래와 같은 코드가 있을 때

import * as stylex from 'stylex';
const styles = stylex.create({
  red: {color: 'red'},
});
let a = stylex.props(styles.red);

아래와 같이 컴파일이 된다고 합니다.

JavaScript 파일

import * as stylex from 'stylex';

let a = {className: 'x1e2nbdu'};

CSS 파일

.x1e2nbdu { color: red; }

결론적으로, 스타일링에 드는 비용을 최대한 적게 만들겠다는 것이 바로 이 세 번째 원칙의 핵심입니다.

프레임워크 불문 (Framework-agnostic)

네 번째 원칙은 특정 프레임워크에 종속되지 않아야 한다는 원칙입니다.

현재 StyleX는 리액트와 가장 궁합이 잘 맞도록 개발되었지만,
모든 자바스크립트 기반의 UI 프레임워크와 함께 사용할 수 있도록 설계되었다고 합니다.

즉, StyleX가 CSS-in-React 솔루션이 아닌 CSS-in-JS 솔루션인 것이죠.

이처럼 특정 프레임워크에 의존하지 않고 독립적으로 사용할 수 있다는 것이 바로 Framework-agnostic이라는 원칙입니다.

StyleX 사용 예시

그렇다면 StyleX는 어떻게 사용해야 할까요?
지금부터 StyleX 사용 예시를 간단하게 살펴보도록 하겠습니다.

StyleX를 사용하기 위해서는,
먼저 아래 코드와 같이 stylex.create() 함수를 사용해서 스타일을 생성해야 합니다.

import * as stylex from '@stylexjs/stylex';

const styles = stylex.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

그리고 이후 아래 코드와 같이 stylex.props() 함수를 사용해서,
생성한 스타일을 실제 element 또는 컴포넌트에 적용할 수 있습니다.

import * as stylex from '@stylexjs/stylex';

// 하나의 스타일만 적용
<div {...stylex.props(styles.base)} />

// 여러 스타일을 동시에 적용
<div {...stylex.props(styles.highlighted, styles.base)} />

사용법 자체는 굉장히 간단하죠?

참고로 여기서 두 번째 경우처럼 여러 스타일을 동시에 적용하는 경우에는,
"The last style applied always wins." 원칙에 따라 중복되는 속성은 가장 앞에 있는 highlighted의 스타일이 적용됩니다.

위에서 살펴본 것처럼 StyleX는 특정 라이브러리나 프레임워크에 종속되는 것이 아니기 때문에,
이처럼 간단한 형태로 어떤 자바스크립트 UI 라이브러리나 프레임워크에 사용할 수 있습니다.

마치며

지금까지 StyleX라는 스타일링 라이브러리와 그 핵심 원칙들에 대해 소개해드렸습니다.

저는 개인적으로 스타일링을 할 때 주로 styled-components를 사용하는데,
조만간 기회가 되면 새로운 프로젝트에서 StyleX를 한 번 사용해 볼 계획입니다ㅎㅎ

StyleX에 관심이 있는 분들은 아래 링크를 참고하시기 바랍니다.

• StyleX 공식 웹사이트
  • https://stylexjs.com/
• StyleX GitHub repository
  • https://github.com/facebook/stylex
• StyleX 핵심 원칙
  • https://stylexjs.com/docs/learn/thinking-in-stylex/

저는 다음에 또 유익한 글로 찾아뵙겠습니다!
지금까지 소플이었습니다. 감사합니다 😀