리액트에서 조건부 클래스 이름줄 때 classNames 라이브러리 사용

 

classnames 라는 라이브러리는 리액트에서 클래스 이름을 동적으로 설정할 때 유용하게 사용되는 라이브러리이다.

 

https://www.npmjs.com/package/classnames

 

 

설치방법

리액트

npm install classnames --save

 

타입스크립트

npm install classnames --save
npm install --save @types/classnames

 

사용 방법

여러 가지 종류의 파라미터를 조합해 CSS 클래스를 설정할 수 있기 때문에 컴포넌트에서 조건부로 클래스를 설정할 때 매우 유용하다.

import classNames from 'classnames';

// ...

return <div className={classNames({
    'my-default-class': true,
    'my-conditional-class': someCondition
})}>Hello</div>;

 

프로젝트에서 사용

프로젝트에서 사용 1

import classNames from 'classnames';

// ...

return (
    <div className="calandar-grid">
        {viewDate.map((item) => (
            <div key={item.full}>
                <p className={classNames({ 'tomato-color': item.restDay })}>{item.day}</p>
                <p>{item.holiday_name}</p>
            </div>
        ))}
    </div>
);

#css 파일

.tomato-color {
    color: tomato;
}

 

 

프로젝트에서 사용(조금 더 상세하게 조건 주기)

<div className="calendar-grid">
    {viewDate.map((item) => (
        <div
            key={item.full}
            className={classnames("day", {
                thisMonth: item.thisMonth,
                "not-thisMonth": !item.thisMonth,
                sunday:
                    item.thisMonth && item.week === Week.SUN,
                saturday:
                    item.thisMonth && item.week === Week.SAT,
                holiday: item.thisMonth && item.holiday,
            })}
        >
            <p>{item.day}</p>
            <p>{item.holiday_name}</p>
        </div>
    ))}
</div>

#css 파일

.day.thisMonth {
    color: black;
}

.day.not-thisMonth {
    color: rgb(175, 175, 175);
}

.day.thisMonth.sunday {
    color: tomato;
}

.day.thisMonth.saturday {
    color: rgb(85, 40, 246);
}

.day.thisMonth.holiday {
    color: tomato;
}