stitches.js의 css prop / style prop 뭘 써야할까?

요즘 한창 사용 중인 styled-component인 stitches는 inline style로 css를 부여할 수 있는 방법이 두 가지 있다.

<Box style={{ width: "100px", height: "100px" }} />
<Box css={{ width: "100px", height: "100px" }} />

// const Box = styled('div', { ... })

두 prop은 동일하게 html 태그에 스타일을 부여한다.

그렇다면 두 prop 간에 차이는 없을까?

• style prop은 DOM 생성 시 태그 내에 inline 스타일로 생성된다.
• css prop는 CSSOM을 생성한다.

css prop이 CSSOM을 생성하는 이유는 정적인 CSS를 잘 관리하기 위함이다.

또한 style prop은 내용을 그대로 inline해버리기 때문에 사전에 정의한 디자인 토큰을 사용할 수 없다.

그러나 css prop을 이용하면 CSSOM으로 변환하는 과정에서 디자인 토큰도 함께 변환된다. 

 

그렇다면 css prop만 사용하면 되는것 아닐까?

 

결론부터 말하면 그것은 위험하다.

동적으로 변화하는 스타일에 대해서는 사용을 피하는 것이 좋다.

 

예를 들어 사이드탭의 사이즈를 드래그로 변화시킬 수 있다고 해보자.

css prop은 스타일이 동적으로 변화하는 경우 (단 1px의 변화에도) CSSOM을 새로 생성해낸다.

드래그 액션에 따라 무수한 CSSOM이 생성될 것이고 트리가 무거워져 성능이 저하될 것이다.

 

실제로 확인해보자

상단의 두 빨간 박스는 스타일이 완전히 동일하다.

c+cmd+shift를 눌러 inspect 모드로 전환하여 두 빨간 박스를 확인하면 class의 해쉬값이 동일하다.

정적인 CSSOM을 생성하여 재사용하였기 때문이다.

css prop은 동일한 스타일에 대하여 재사용하기 때문에 동적으로 사이즈가 변화하는 상황이 아니라면

CSSOM 트리를 가볍게 유지할 수 있기 때문에 오히려 성능의 개선을 기대할 수 있다.