clsx, cva를 언제 사용하는게 좋을까요?

[aahreum]

관련 PR

• [✨ Feature/35] 공통 태그 컴포넌트 구현 Taskify-Frontend#39
• [✨ Feature/27]: 프로필 이미지 컴포넌트 구현 Taskify-Frontend#38
• [✨ Feature/30]: 타이틀 컴포넌트 구현 Taskify-Frontend#40

Tailwind로 컴포넌트를 만들면서 clsx, cva, tw-merge 패키지를 사용하고 있는데
각 상황에서 언제 어떤 조합을 쓰는 게 적절한지 혼란스러워서...🤯 질문드립니다!

제가 리뷰를 남기면서 clsx로 적용한 스타일을 cva를 쓰면 리렌더링될 때 스타일 함수 호출을 줄일 수 있다고 했었는데
다시 생각해보니 clsx를 굳이 성능 이슈를 이유로 cva를 사용해보라고 하는 것은 과도한 리팩토링 제안인 것 같다고 느꼈습니다.....

그래서 언제 clsx를 사용하고, cva를 사용하는게 좋은 판단일지 궁금합니다!

[aahreum]

제가 생각해본 케이스는

1. clsx 사용

• 단순한 조건부 스타일을 정의할 때

2. cva 사용

• 컴포넌트에서 여러 variant(size, color, ....등등등)를 관리해야 하는 경우에는 clsx를 사용하는 것보다 cva를 사용하는게 더 가독성이 좋다고 느껴졌습니다.
• variant를 타입스크립트에 연계해서 사용하기에도 좋다고 생각합니다!

[tkp12345]

이미 정답을 알고 계시는걸요 일단 다같이 왜쓰는지는 한번 집고 넘어가보시죠 ㅎ