[리액트] classnames 라이브러리

classnames 라이브러리는 서로 다른 효과를 갖고 있는 css를 하나의 컴포넌트에 적용하는데 사용합니다.

 

일단 해당 프로젝트에서 

 

npm add classnames OR yarn add classnames 라고 커맨드 창이나 터미널에서 입력을 하면 해당 라이브러리를 설치 합니다.

 

그리고 설치를 하고 나면 

 

사용방법은 간단합니다.

import React, { Component } from 'react'
import classNames from 'classnames/bind'
import styles from './App.css'
 
const cx = classNames.bind(styles);
 
class App extends Component {
    render(){
        const isBlue = true;
 
        return (
            <div className = {cx('box', {blue : isBlue})}>
                
            </div>
        )
    }
}

간략하게 css는 생략하겠습니다. box는 화면에 네모이고 blue는 테두리를 파랑색으로 만들어 주는 css입니다.

 

기능 중에는 true/false로 효과를 주고 안주고가 가능하다는 것입니다. 

 

응용이 가능하시겠죠?

 

끝!