classnames 라이브러리 : css modules 여러 클래스 추가, 조건부 사용

 

 

 

1. classnames

https://www.npmjs.com/package/classnames

classnames

yarn add classnames

 

import cx from "classnames";


const commented = true;
const reposted = true;
const liked = false;

// 조건부 클래스명을 주는 방법은 여러가지가 존재한다. 
<div className={cx(style.commentButton, { [style.commented]: commented })}>
<div className={cx(style.repostButton, reposted && style.reposted)}>
<div className={cx([style.heartButton, liked && style.liked])}>



출처: https://www.inflearn.com/course/next-react-query-sns%EC%84%9C%EB%B9%84%EC%8A%A4

> classnames는 CSS 클래스를 조건부로 설정할 때 매우 유용한 라이브러리

 

출처 : https://npmtrends.com/classnames-vs-clsx

 

> npm trend에서 보니 clxs 사용량이 더 많은걸로 봐서 clxs도 알아봐야겠다

 

2. clsx

https://www.npmjs.com/package/clsx

clsx

 

> clxs 또한 조건부 클래스를 표현하는데 용이한 라이브러리

> 조건부로 클래스 네임을 추가할 때, undefined , null 등이 들어갈 수 있는데 

자동으로 true 한 string만 들어가도록 처리해줌

 

 

3. 비교

1. classnames 

- React 애플리케이션에서 주로 사용되는 패키지

- 조건부로 CSS 클래스를 관리해야 할 때 유용

- typescirpt 지원하여 문법 오류 감지 가능

 

[장점]

1. React 전용 패키지: classnames는 주로 React 애플리케이션에서 사용되므로 React 컴포넌트와의 통합이 용이
2. 유연한 사용법: 조건에 따라 CSS 클래스를 동적으로 추가/제거하는데 유용한 API를 제공하여 코드를 깔끔하게 유지 가능
3. 커뮤니티 지원: classnames는 React 생태계에서 널리 사용되며, 따라서 다양한 문서와 예제, 커뮤니티 지원 가능

[단점]

   1. React에 종속적: React 외의 다른 JavaScript 프로젝트에서는 사용할 수 없음

 

---

2. clxs

- clxs는 React에 국한되지 않고 일반적인 JavaScript 환경에서도 사용

- Node.js에서 서버 사이드 렌더링할 때나, React 이외의 JavaScript 프로젝트에서도 유용하게 사용

- typescirpt 지원하여 문법 오류 감지 가능

 

[장점]

1. 일반적인 JavaScript 환경에서 사용 가능: clxs는 다른 JavaScript 환경에서도 사용
2. 간단한 API: classnames와 유사한 API를 가지고 있어서 사용법이 익숙하고 쉬움
3. 유연성: React 이외의 JavaScript 프로젝트에서도 사용 가능하므로, 다양한 유형의 프로젝트에 적용가능

[단점]

React에서 classnames보다 불편할 수 있음: React에서 classnames는 널리 사용되어 익숙한 패턴이며, 이에 익숙하지 않은 개발자에게는 사용하기 불편

 

4. 결론

> 리액트에는 classnames를 적용하는 것이 적합한 것 같음.

 

 

끝.