className을 여러개 사용 가능
조건에 따라서 className을 부여하고 싶을 때 사용 가능
💡 className을 한 개 사용하고 특정 조건에 따라서 className을 주는 것이 아니라면 classNames를 굳이 사용할 필요는 없다.import cx from "classNames"
<div className={cx('class1','class2')}></div>
<div className={cx({'class1': state})}></div>
옳바른 방식
// class 1개 적용
className={styles.title}
// class 1개 이상 적용
className={cx(styles.title, styles.bold)}
// class 1개 이상 적용 + 조건부 적용
className={cx(styles.title, styles.bold, { [styles.show]: isShow })}
주의할 방식
styles.
을 안붙여도 된다는 장점이 있을 수 있다.classnames
안에 집어 넣어 글로벌하게 사용하고자 할 때 쓸 수 있는 방법이 없을 수 있다. const cx = classNames.bind(styles)
style = {cx('title','title2')} // 이렇게 난수화 안된 클래스 이름으로 작성할 수 있다.
style = {cx('global', '다른 클래스 이름')} // 하지만 이렇게 작성할 때 글로벌 클래스명으로 사용할 'global'마저 bind된 곳에서 찾기 때문에 이런 경우 문제가 생길 수 있다.
style={cx('global', styles.title)} // 글로벌 클래스 명으로 사용할 파일만 이런 식으로 작성할 수도 있다. 하지만 모든 파일의 형식을 통일하지 않아 가독성이 떨어질 수 있으니 어떻게 사용할 지 한 번 고민해보는 것도 좋다.