취업 소식 받고, 또 일을 시작하면서 한동안 치이느라 블로그할 기력이 없다가, 요즘 Next.js 13을 쓰면서 UI 라이브러리 등을 사용하면서 hydration 이슈들을 겪다보니 문득 서버 컴포넌트에서 CSS 문제 해결에 관심이 생겼다.
대다수의 UI/CSS-in-JS 라이브러리가 클라이언트에서만 사용되는 환경인지라, 서버 컴포넌트를 생각하면 pure CSS를 쓰는 게 좋을까? 라는 고민을 하던 중에 트위터에서 Chakra-UI 팀이 새로운 CSS-in-JS 라이브러리인 Panda CSS를 공개한 것을 발견했다.
CSS-in-JS인데도 서버 컴포넌트에 적용할 수 있는 강점, 그리고 현재 개인 프로젝트 등에 사용하고 있던 UI나 CSS 라이브러리의 대체제로서 써볼 수 있겠다는 판단에 연습삼아 쓰던 중, 상당히 마음에 들어서 다른 사람도 사용해봤으면 좋겠다는 마음과 개인적인 공부를 위해 번역에 도전해보기로 했다.
다만, 실제 영어 수준이 형편없어 번역이라 적고 번역기를 돌려가며 문장을 수정하고 보충하는 정도이지만, 그래도 향후 Panda CSS에 관심 생기신 분들께 좋은 자료가 될 수 있으면 좋겠다.
수많은 CSS-in-JS 라이브러리들 중에 Panda를 선택해야 하는 이유는 무엇일까요?
런타임 CSS-in-JS와 스타일 Prop은 개발자들에게 구성하기 쉽고, 예측할 수 있으며, 사용도 용이한 동적 UI 컴포넌트를 구축할 수 있는 매우 강력한 기능이지만, 그 대가로 퍼포먼스와 런타임의 비용이 따라옵니다.
서버 컴포넌트의 등장과 서버 퍼스트 프레임워크(Remix, Next.js 등)가 떠오르면서, 대부분의 기존 런타임 CSS-in-JS 스타일링 솔루션(emotion, styled-component 등)은 안정적으로 작동하지 않거나, 아예 작동하지 않게 되기도 합니다.
이 새로운 패러다임은 성능과 개발, 그리고 사용자 경험 면에서 큰 승리를 거두었지만 CSS-in-JS 라이브러리에 대해서는 ‘혁신 또는 죽음’이라는 새로운 과제를 던져줬습니다.
💡Fun Fact: 대부분의 CSS-in-JS 라이브러리에는 GitHub 레포지토리에에 "Next app dir"이나 "Server Components"에 대한 이슈가 상시 고정되어 있어 이 도전 과제를 더욱 더 중요하게 생각하도록 만듭니다.
그래서, CSS-in-JS가 죽었습니까? 라는 질문에 대답하자면 이렇게 말할 수 있습니다. “아니오, 하지만 진화해야 합니다!”