[TIL #32] Westagram - 댓글 구현

Westagram 댓글 구현

[구현 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 을 사용하여 자바스크립트 문법을 넣어서 삼항연산자를 이용하였다.