[Tip] className 표현 종류 & Live Template ('cn')

요약

  1. className 표현 종류

- (1) className={}   (2) class=""   (3) className=' ' 

 

  2. className → Live Template으로 활용 (cn)

 

---

상세
  1. className 표현 종류

(1) class=""    (2) className={}     (3) className=' ' 

// (1) class=''
<div class=''>OOO</div>

// (2) className={}
<div className={}>OOO</div>

// (3) className=''
<div className=''>OOO</div>

 

HTML의 (1) class는 JSX에서 className으로 사용해야함.

→ 왜냐하면 class는 JavaScript의 예약어이기에 사용 불가!

 

JSX에서는 (2) className={'...'} (3) className="..."는 같은 결과

차이점은 JavaScript 표현식을 쓸 수 있다는 점. 따라서 아래처럼 동적 class 조합할 때 유용합니다:

<p className={`${isActive ? 'text-blue-500' : 'text-gray-500'} font-bold`}> Hello </p>

 

---

 

  2. className → Live Template으로 활용 (cn)

- WebStorm의 Live Template snippet으로 className 입력 후 자동으로 ' '으로 감싸도록 설정하기

 

Live Templates > 새 템플릿 추가 Abbreviation: cn

Applicable in: JavaScript JSX, TypeScript JSX 등 선택

이제 JSX 안에서 cn + Tab을 치면  className='' 이렇게 자동완성.

 

Live Template