className (클래스 네임)

React의 jsx 문법의 경우 클래스명을 추가해줄때

class="class-name" 이라고 쓰는것 대신 className={class-name}을 사용하게 된다.

또한 이 className은 객체 object값으로 처리가 가능해 유동적으로 변경도 용이하다.

 

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: 0
    };
    
    render() { 
        return (
        <div>
            <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
            <button className="btn btn-secondary btn-sm">Increment</button>
        </div>
        );
    }

    getBadgeClasses() {
        // defalut class
        let classes = "badge m-2 ";
        
        // count의 숫자의 따라 class명이 변경된다. (bootstrap)
        classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
        return classes;
    }

    formatCount() {
        const { count } = this.state;
        return count === 0 ? 'Zero' : count;
    }
}
 
export default Counter;