classnames 라이브러리 제거하기

3년만에 react-bingo 프로젝트를 다시 시작 하면서 코드를 보니 예전에 props의 값에 따라서 class를 추가 하고 빼주기 위해서 classnames 를 사용했던 코드들이 있었다. 요즘은 classnames 라이브러리 없이 여러개의 class를 props, 특정값에 따라서 넣고 뺄 수 있는지 찾아보니 ES6의 Template literals 를 사용해서 가능했다

기존 코드

1
2
3
4
5
6
7
8
9
10
render() {
var classes = classNames({
cell: true,
selected: this.props.selected
});

return (
<div className={classes} onClick={e => this.props.onClick(this)}>
)
}

ES6 Template literals로 변경한 코드

1
2
3
4
5
6
7
8
9
10
render() {
const selected = this.props.selected ? "selected" : "";

return (
<div
className={`cell ${selected}`}
onClick={e => this.props.onClick(this)}
>
)
}

공유하기 댓글