[구현 JavaScript 코드]
import React from 'react';
import './commentInputList.scss';
class CommentInputList extends React.Component {
constructor() {
super();
this.state = {};
}
render() {
const { id, reply, time, isLike } = this.props;
return (
<>
<div className="commentPlus">
<span className="id">{id}</span>
<span className="reply">{reply}</span>
<span className="time">{time}</span>
<i className={`fas fa-heart ${isLike ? 'isLiked' : 'isNotLike'}`}></i>
</div>
</>
);
}
}
export default CommentInputList;
위 코드에서
<i className={`fas fa-heart ${isLike ? 'isLiked' : 'isNotLike'}`}></i>
heart아이콘이 true 일때 클래스는 isLiked
, false 일때는 isNotLike
로 바꿔주고, 각각의 클래스에 맞게 스타일을 주었다. 여기서 className을 두개를 주었다.(fontawsome에서 가져온 tag에 클래스 네임이 있기때문에) className 을 두개주기 위해서 backtick 을 사용하여 자바스크립트 문법을 넣어서 삼항연산자를 이용하였다.