[React / CSS] 동적 조건부 스타일 지정 classNames 라이브러리

☘️ 시작하기 앞서...

css in js 라이브러리를 사용하지 않고 css 를 적용할 때, 동적으로 클래스 이름을 지정해주기 위해서 삼항연산자 등을 사용할 수 있다.

하지만 이 과정은 코드가 복잡해지고 더러워진다.

 

그래서 이를 해결하기 위해 classnames 라이브러리를 사용할 수 있다.

 

---

 

☘️ classnames 라이브러리

1. 설치하기

[공식 깃허브 문서 - classnames]

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together

 

해당 라이브러리를 사용하기 위해 classnames 라이브러리를 설치한다.

npm install classnames

 

2. 사용하기

classnames 라이브러리를 사용하기 위해 import 한다.

import classNames from 'classnames';

참고로 나는 scss modules 을 사용하고 있다. (아래 코드처럼 생김)

.profile {
  border-radius: 50%;
  border: 1.31px solid #f96868;

  position: relative;

  cursor: pointer;
}

import style from './styles.module.scss';

// ... 생략

<div className={style.profile} onClick={onClickProfile}>

 

2-1. 상황 1

만약 className 으로 profile 말고 props 로 받은 size 값(lg, bg, md, sm)에 따라 해당 className 을 추가하고 싶을 때 classnames 라이브러리가 유용하다.

 

이렇게 조건부로 size 값에 따른 className 을 지정할 수 있게 된다.

const profileClass = classNames(style.profile, style[size]);

// 생략

<div className={profileClass} onClick={onClickProfile}>

 

코드를 보면 제대로 적용된 것을 확인할 수 있다. (scss module 이라서 뒤에 숫자가 적혀있음)

lg, bg, md, sm

 

2-2. 상황 2

만약 isLongArrow 라는 boolean 값이 true 일 때, longArrow 라는 classname 을 주고 싶을 때엔

classNames 라이브러리를 사용해서 다음과 같이 표현할 수 있다.

const arrowClass = classNames(styles.arrow, {
  [styles.longArrow]: isLongArrow,
});

// 생략

<div className={arrowClass} onClick={onClick}>

 

코드를 보면 isLongArrow 가 true 일 때 longArrow 라는 classname 이 잘 적용된 것을 확인할 수 있다.

longArrow

 

---

 

☘️ 마치며...

그동안 Emotion 처럼 css in js 를 사용하다가 오랜만에 정적인 css 라이브러리로 프로젝트를 구현하는데 classnames 라이브러리로 이렇게 동적으로 간편하게 classname 을 적용해 스타일을 적용할 수 있다는 것을 알게 되었다.

 

더 자세한 내용을 알고 싶으면 공식문서를 참고하는 것을 추천한다.

GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together