CSS 클래스를 스마트하게 관리하는 방법: clsx 라이브러리 활용하기

최근에는 CSS-in-JS 같은 방식이 인기를 끌면서 전통적인 클래스를 사용하는 경우가 많지는 않은데요. 실제 개발 과정에서 프로젝트가 커지다보면 조건에 따라 다양한 스타일을 적용해야 하는 상황이 발생하기도 합니다. 이때 clsx 라이브러리가 도움이 될 수 있는데요.

clsx는 컴포넌트의 클래스 이름을 동적으로 결합하고 관리하는 과정을 단순화해줍니다. 이 라이브러리는 객체나 배열을 입력으로 받아, 조건부로 클래스 이름을 생성해줍니다. 예를 들어, 버튼에 '활성화' 상태를 표현하는 클래스를 추가하려면 다음과 같이 작성할 수 있습니다:

clsx({ 'btn': true, 'btn-primary': isActive}); 
// 결과: "btn btn-primary" (isActive가 true인 경우)

또는 배열을 사용해 다음과 같이 표현할 수도 있습니다:

clsx(['btn', isActive ? 'btn-active' : 'btn-inactive']); 
// 결과: "btn btn-active" 

이처럼 clsx를 사용하면, 여러 조건에 따른 클래스 이름을 간결하고 가독성 좋게 표현할 수 있습니다.

이 분야에서 clsx와 함께 자주 언급되는 라이브러리가 classnames인데요. 두 라이브러리는 사용법이 매우 비슷합니다. 그러나 clsx는 성능 향상을 목표로 개발되어서 결과적으로 더 작은 번들 크기와 더 빠른 실행 속도를 제공합니다. 그러한 이유로 최근 npm 트렌드를 보면, clsx가 classnames의 인기를 추월한 것을 확인할 수 있는데요.

그렇다고 해서 기존 프로젝트에서 classnames를 사용하고 있다면 굳이 clsx로 변경할 필요는 없어보입니다. 이러한 성능 차이가 프로젝트 전체에 미치는 영향은 그리 크지 않을 수 있고, classnames는 classNames라는 좀 더 직관적인 함수 네이밍을 제공하는 이점도 있으니까요. 하지만 새로운 프로젝트를 시작한다면 트렌드 와 성능을 참고해서 clsx의 사용을 고려해보는 것을 추천드립니다.