React - className

이호현·2020년 8월 8일
0

React

목록 보기
2/14

1. className

html에서는 태그에 class를 붙이고 ' . '을 이용해서 css를 적용하지만 React에서는 class가 예약어라 사용이 불가능하다.
자바스크립트에서 class란 예약어가 사용되고 있기 때문이다.
그래서 className을 이용해서 css를 적용한다.

2. classNames

classNames는 React 라이브러리중 하나이다.
className을 적용할 때 다양한 옵션을 붙여서 className을 적용할 수 있다.
className에 true에 해당하는 값은 추가로 표시 가능하고, false인 값은 className에 적용되지 않는다.

<div className={classNames()} />	// 기본형태이다.

classNames를 어떻게 사용하는지는 아래와 같다.

classNames('test')			// 'test'

classNames('test', 'box')		// 'test box'

classNames('test', {box: false})	// 'test'

classNames('test', {box: true})		// 'test box'

classNames({test: true, box: true})	// 'test box'

classNames(['test', 'box'])		// 'test box'

classNames(null, false, undefined, 0, '')	// ''

맨 아래 classNames처럼 2개 이상 받을 수도 있다.
따로 false값을 적용해 주지 않는 이상 값을 받으면 true

profile
평생 개발자로 살고싶습니다

0개의 댓글