Why Panda.css ??
카테고리: Blog
판다css 도입 배경
Next 프로젝트를 진행하며 module.css와 tailwind.css를 배웠다.
module.css vs tailwind.css
일반적으로 이 둘 중 하나를 채택하는 것이 부정하기 어려운 Next프로젝트의 베스트 프랙티브 일 것이다.
하지만 module.css를 구현하기 위해 각 컴포넌트마다 각자의 css파일을 작성해야 하는 귀찮음이 있었고
tailwind는 재활용도 불가능하고 지저분하게 컴포넌트를 클래스네임으로 도배를 시켜버리는 환경에 불편함이 있었다.
styled-component도 옵션이긴 하지만 아직 서버 컴포넌트에 대한 이해가 없어
클라이언트에서는 하이드레이션에 의한 플리커링 현상을 방어할 수가 없었다.
이러한 불편함에 슬슬 귀차니즘이 쌓이면서 결국..
이렇듯 무지성으로 inline-styled를 발라버리기 시작했다…
노오오오올랍게도 쌩자바스크립트 문법으로
그냥 const로 변수선언 하고 style프로퍼티들을 통객체 안에 집어넣으니
객체 안에서 CSS키와 “” 문자열로 감싸진 값으로
절묘하게 완벽히 일치하는 문법을 만들 수 있었고
자바스크립트가 이런 건성인 문법도 대충 받아주는 신비한 현상을 발견하고 말았다.
이 발견으로 한동안 대충 이런식으로 스타일을 밀어붙히곤 했었다.
간혹 zIndex나 flexDirection등으로 타입에러가 뜨곤 했는데,
이것도 그냥 리액트에서 제공하는 타입인 React.CSSProperties를 사용하여 타입을 지정하면
자연스레 해당 객체에 대한 타입을 CSS속성으로 할당하여 넘길 수 있었다.
const myStyle: React.CSSProperties = { ... }
export default function App() {
return <div style={myStyle}>안녕</div>
}
대충 이런식으로…
이러한 방식은 썡자쓰 문법이기 때문에 변수로 선언한 myStyle을 export하여
다른 컴포넌트에서 그대로 import받아 재사용할 수 있다는 장점도 있었고
어설프지만 아무튼 CSS-IN-JS라고 할 수 있는 자바스크립트로 쓰여진 CSS이기 때문에
자바스크립트의 변수나 조건등을 활용하여 CSS프로퍼티를 유동적으로 변경할 수도 있었다!
이러한 배경에서 inline-styled 방법으로 꽤 많은 컴포넌트를 쳐냈지만 점점 한계에 부딛히게 되었는데
- 결국 변수에 대한 작명이 필요
- hover, ::after등 CSS 특수기능 활용이 거의 불가능
- 내가 보는 컴포넌트 시트는 깔끔하게 정돈할 수 있으나 HTML에 박히는 style태그가 더러워지는건 어쩔 수가 없음
돌이켜 다시 생각해보니 결국 tailwind의 더러움과 module의 귀찮은 작명이 여전히 존재하고 있었다.
따라서 이러한 문제점들과 이미 제법 나가버린 진도를 수습하기 위해
최대한 날로먹을 수 있는 라이브러리를 찾아나서게 되었다.
Hello, Panda!!
아무튼 Next 공식문서를 딸딸딸 읽어가며 Next가 추천하는 라이브러리를 전부 까봤다.
대충 당연하다듯이 module.css가 제일 먼저 나오고 tailwind는 아예 별도의 페이지가 존재 했으며
그 이후 마지막으로 CSS-IN-JS방식을 대충 몰아넣은 짬통 페이지가 있었다.
이 중에서도 styled-component, styled-jsx, emotion, chakra, stylus, vanilla-extract 등
다양한 기술들이 소개 되고 있는데, 그 중 Panda.css가 눈에 띄었다
앞 뒤 다 짜르고 봐도 일단 귀여운 우리의 판다군.jpg
Panda.css의 핵심 컨셉은 이렇다.
@layer utilities (Highest priority) @layer recipes @layer tokens @layer base @layer reset (Lowest priority)
이와 같이 CSS를 레이어 단위로 5개로 나누고,
일반적으로 사용하는 className을 통한 스타일링은 utilities class로 인식하여
tailwind처럼 Atomic한 CSS를 생성한다.
이러한 과정에서 tailwind와 유사한 후처리를 통해 zero-runtime을 구현했다곤 하는데 뭐 자세한건 잘 모르겠다..
아무튼!! 그러한 배경으로인해 styled-component와 같은 하이드레이션에 의한 플리커링 걱정이 없고
뭐 어떻게 어떻게 해서 서버 컴포넌트까지 공식 지원한다곤 하니
추후에 학습과 지식이 늘어나며 더 많은 것들을 해볼 수 있을 것 같았다.
base, recipes와 tokens은 일종의 global.css로, 사용자가 사전에 설정해둔 속성들을
글로벌하게 적용하거나 일종의 컴포넌트처럼 스타일 덩어리들을 불러와 적용시킬 수 있다.
이러한 방식으로 재활용이 가능하고 단일 유틸리티 클래스 또한
기존에 작업했던 inline-style처럼 변수로 선언하여 className에 직접 내리는 방식이기 때문에
export하여 재활용한다면 얼마든지 파일들을 넘나들며 재탕이 가능하고
이러한 공통된 속성은 common에 몰아넣어 style.js가 css가 되는 기적을 보여주고 있다.
대충 이런식으로 작성해서 className에 꽂아넣으면 놀랍게도 적용이 된다!!
기존의 styled-component와 매우 유사한 문법이며, 아예 ``빽틱을 사용해서
styled-component처럼 사용해도 정상적으로 동작한다.
하지만 panda.css도 tailwind.css와 유사한 시스템을 적용하고 있기 때문에
HTML이 지저분해 지는건 지금으로서는 어쩔 수가 없나보다…
아직 독스를 정독하지 못해서 잘은 알지 못하지만
얼핏 보기로는 className을 압축하여 보기좋게 가꿔주는 것도 있다고 하다!
Panda.css를 설치하면 이런 폴더와 파일들이 잔뜩 생성되는데,
기본적으로 css프로퍼티를 이쪽에서 node_module처럼 꺼내와서 쓰고 있고
원한다면 사용자가 값을 변경하여 커스텀도 가능하다
독스와 함께 찬찬히 뜯어보며 마스터가 되어볼 생각이다.
이렇듯 대충 styled-component처럼 쓰고 tailwind처럼 동작하는
각자의 장점만을 뽑아와서 개선시킨 라이브러리로 요즘 유행하고 있다는거 같다.
이 방식으로 훈련하면 tailwind공부를 하지 않아도 날먹할 수 있으며,
기존에 내가 작업했던 방식에서 크게 벗어나지도 않아 마이그레이션이 빠르게 진행되었고,
마지막으로 styled-component의 머리깨지는 귀찮은 설정과 하이드레이션 걱정이 없는 강점이 있다!
댓글 남기기