[React] react에서 className 여러 개 사용하는 방법

[React] react에서 className 여러 개 사용하는 방법

react 개발하면서 className을 여러 개 적용하고 싶을 수 있다. 해당 게시글에서는 1개의 컴포넌트에 className 여러 개 적용하기, 상황에 따라 className 적용하기 이다.

# className 적용하기

간단하게 className을 적용할 수 있는 npm module clsx이 있다. 먼저 설치해주자.

명령어 yarn add clsx or npm install clsx

사용 방법은 매우 간단하니 훑어만 보자.

className 여러 개 적용하기

styles.title styles.margin styles.color 이렇게 css class 3개가 있다고 가정하자. 해당 class를 하나의 div에 적용한 코드를 확인해보자.

<div className={clsx(styles.title, styles.margin, styles.color)}>
</div>

clsx 함수에 class를 콤마(,)로 이어 작성하면 끝이다.

상황에 따라 className 적용하기

상황에 따라 css를 다르게 적용해야한다고 가정해보자. count가 1인 경우 styles.red, count가 2인 경우 styles.yellow, count가 3인 경우 styles.blue className을 적용하는 코드이다.

<div className={clsx({
  [styles.red]: count === 1,
  [styles.yellow]: count === 2,
  [styles.blue]: count === 3,
  })}>
</div>

{ [className 명] : 조건 } 으로 작성해주면 된다.

위 2경우 같이 사용하기

기본 class를 적용하고 나머지는 상황에 따라 적용하고 싶을 수 있다. 이해가 안될 수 있는데 예를들어 styles.bold는 항상 적용되어 있고 상황에 따라 styles.red, styles.blue를 적용해야 한다고 가정하자. 아래와 같이 작성할 수 있다.

<div className={clsx(styles.bold, {
  [styles.red]: Boolean(red), 
  [styles.blue]: !Boolean(red)
})}>
</div>

위와 같이 사용할 수 있다. 큰 어려운 내용은 없으니 쉽게 사용할 수 있을 것이다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.