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