classname으로 스타일 간결하게 관리하기

 

 

 

React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classnames 라이브러리를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다. 

 

 

설치

// npm을 사용한다면,
npm install classnames

// yarn을 사용한다면,
yarn add classnames

 

먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다.

 

 

적용

이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다.

import * as styles form './style.css.ts';

export function Component() {
  return (
    <div classnames={`${styles.MainContainer} ${styles.FlexCenter} ${styles.InnerPadding}`}>
      <p>hello, world!</p>
    </div>
  )
}

 

세 가지 클래스 네임이 겹치면서 가독성을 해치고 있는데, classnames를 통해 간결하게 만들어보겠습니다.

 

import classNames from 'classnames';
import * as styles form './style.css.ts';

export function Component() {
  return (
    <div classnames={classNames(styles.MainContainer, styles.FlexCenter, styles.InnerPadding)}>
      <p>hello, world!</p>
    </div>
  )
}

 

백틱과 달러 기호가 사라져 한결 파악하기 편해진 모습입니다.

 

하지만, classnames는 조건부 스타일을 주어야 할 때 훨씬 더 큰 힘을 발휘합니다.

라이브러리 없이는 삼항 연산자를 통해 아래처럼 스타일을 주어야 했습니다.

 

import * as styles form './style.css.ts';

export function Component() {
  return (
    <div classnames={`${styles.MainContainer} ${styles.FlexCenter} isPadding ? ${styles.InnerPadding} : ''`}>
      <p>hello, world!</p>
    </div>
  )
}

 

 

 

라이브러리를 사용하면, boolean 값을 넘겨줌으로써 간편히 조건부 스타일을 줄 수 있습니다.

 

import classNames from 'classnames';
import * as styles form './style.css.ts';

export function Component() {
  return (
    <div classnames={classNames(styles.MainContainer, styles.FlexCenter, { [styles.InnerPadding]: isPadding })}>
      <p>hello, world!</p>
    </div>
  )
}

 

 

 

정말 간단한 라이브러리지만, 코드의 가독성을 한껏 올려주는 효과를 가져 짧게 정리해보았습니다.

덕분에 감사하게 사용중이네요 :)