classnames 라이브러리 사용법

뿌이·2023년 5월 8일
0

react 15버전

목록 보기
14/17

먼저 classnames 라이브러리를 사용하는 이유는
조건에 따라서 클래스 이름을 추가하거나, 제거하거나, 다르게 주고싶을 때 사용한다.

import

import cx from "classnames"; //cx는 내가 classnames를 사용할 이름이다. 너님들 맘대로 설정하면 됨.

classnames안 쓸 때

<li className={ buttonIndex === -1 ? 'active': ""} style={{cursor: 'pointer'}}>
<div className={isClickedCalendar ? "calendar_box open" : "calendar_box"} style={{marginLeft: 5}}>

classnames 쓸 때

<li className={cx({'active': buttonIndex === -1})} style={{cursor: 'pointer'}}>
<div className={cx('calendar_box', { open: isClickedCalendar })} style={{marginLeft: 5}}>
profile
기록이 쌓이면 지식이 된다.

0개의 댓글