[react] className 쓰는 법(총정리)

class 이름을 그냥 쓰거나, 변수로 넣거나, 조건을 걸거나 하는 경우가 있는데 헷갈려서 정리를 해보았음. 추가될 수 있음

 

 

1. 기본

<div className="preview"></div>

그냥 html에 대놓고 쓴다면 쌍따옴표 안에 써주면 된다.

 

2. 변수

<div className={ variable }></div>

변수라면 중괄호 안에 써주면 된다.

 

나같은 경우 module.scss를 style이라는 이름으로 import했기에 className에 { style.container } 이렇게 써줌.

 

 

3. 기본 + 변수

<div className={`preview ${variable}`}></div>

조합버전은 중괄호 안에 백틱을 넣고 변수는 달러중괄호를 써서 써주면 된다.

 

아니면 조건문같은 경우 이런 방법도 있다.

<div className={'preview' + (isActive ? ' active' : '')}></div>

 

+ 좀 더 고차원적인 방법

const classProperties = {
  "main-class": true, // 일반 string인 경우
  styles: true, // 변수인 경우
};

function getClassNames(classes) {
  return Object.entries(classes)
    .filter(([key, value]) => value)
    .map(([key, value]) => key)
    .join(" ");
};

const resultNames = getClassNames(classProperties);

<div className={ resultNames }></div>

classProperties 안에 여러 클래스 이름을 넣을 수 있는데, 둘다 value를 true라고 써놨지만 저 안에는 조건들을 넣으면 된다. 그리고 나서 공통 함수인 getClassNames를 활용해서 string으로 빼준 다음에 className으로 붙여주면 끝나기때문에 범용적이라서 좋은듯.

 

아래 글에서 두번째 댓글 확인

javascript - How to add multiple classes to a ReactJS Component? - Stack Overflow

How to add multiple classes to a ReactJS Component?