[StyleX] StyleX 살펴보기

이번 포스트에는 최근 Meta에서 개발한 오픈소스 "StyleX" 에 대해 살펴보려고 합니다.

 

소개

StyleX는 styled-component, Emotion으로 대표되는 CSS-in-JS 솔루션 중 하나입니다. 2023년 12월 기준 가장 최근에 발표된 솔루션 입니다. React를 개발했던 Meta에서 만든 솔루션이기에 상당히 기대가 됩니다.

 

Homepage: https://stylexjs.com/

Repository: https://github.com/facebook/stylex/

 

동작하는 원리는 styled-component, Emotion과 비슷한 것 같고, Typescript/Flow의 Type-Safety를 강화한 점이 눈에 띕니다. 개발자가 작성한 스타일을 임의의 클래스로 생성하고, 컴파일 타임에 이를 사용하는 컴포넌트에 클래스를 지정하게 하여 런타임에 동적으로 CSS 생성하는 오버헤드를 없애는 방식을 취하고 있습니다.

 

이 말은 styled-component처럼 dynamic styling 보다는 conditional styling을 고수한다는 것이고, class가 정의한 내용에 따라 Type화 시켜서 형-안정성을 높히는 방식을 취하는 것으로 보입니다.

 

※ dynamic styling은 동적으로 css 코드를 생성해서 적용하는 방식이고, conditional styling은 조건에 따라 class를 적용할 지 말지를 통해 스타일링을 하는 것을 의미합니다.

 

회사에서 dynamic styling을 많이 사용하는 저로서는 조금 덜 반갑네요. 사실 conditional styling으로 해도 되지만, 이 경우 타이핑하는 코드가 더 길어져서 싫어하거든요. 성능은 뭐... 다들 좋은 폰/컴퓨터 쓰니까...

 

그리고, 다른 CSS-in-JS 솔루션처럼 Theme 기능을 지원하고, 이를 위해선 당연히 스타일에서 사용할 값들이 변수화 될 수 있는 기능도 있겠죠? 

 

예제

Styling 코드

stylex.create 함수를 통해 스타일을 정의합니다. 그리고 그 안에는 클래스와 유사한 역할을 하는 "key"(위 코드에서 root, child)가 있고, "value"는 React에서 style을 지정했을 때와 동일한 방식으로 camelCase 스타일에 스타일 코드가들어옵니다.

 

아래에 있는 colorStyles이란 코드도 똑같네요. 조건에 따라 "red"를 쓸 지, "green"을 쓸 지 결정하는 방식입니다. 사용하는 코드를 보겠습니다.

스타일 사용하기

html 태그에 stylex.props 함수를 이용해 스타일링을 하고 있습니다. &&를 이용해 스타일을 지정할 수 있고, Component의 style 속성으로 온 스타일로 지정할 수 있네요. 함수 사용법을 보니 내부는 대충 이런식이 아닐까 싶네요.

function props(...args) {
	const style = args.filter(x => x).reduce((p, c) => ({...p, ...c}), {});
    return {
    	style
    };
}

 

props에 온 인자 중에서, null이 아니거나 false가 아닌 친구들만 모아서 하나의 object로 만들고, 이를 style로 내보내서 html 코드에 적용하는 방식으로 보이네요.

 

근데 아까 서두에서 말했듯이 class를 사용한다고 했으니, styled.main, styles.active, colorStyles[color]에 대응되는 className을 컴파일러가 생성해서 주입하지 않을까 싶네요.

 

결론

재미있는 구석은 없어서 사용하고 있는 라이브러리가 있다면 굳이 바꿔야 하나? 하는 생각이 드는 라이브러리입니다. 그러나 개발을 시작하는 단계라면 이 라이브러리를 사용하고 싶네요. conditional styling 만으로 개발이 가능한지도 궁금하고 그렇게 개발하기 위해서 제가 기존에 체득했던 개발 방식과는 다른 방식을 배울 수 도 있을 것 같아서요.

 

이번 포스트는 여기까지로 줄이고, 다음 포스트에서 사용법을 자세히 알아보면서 새로운 깨달음을 얻어보겠습니다.

 

그럼 안녕~