[react] fontawesome 아이콘 클릭 변경 기능 구현하기

🚩 목표 : 좋아요 기능 구현하기

• fontawsome 하트 아이콘을 이용하여 클릭 시 ♡를 ♥︎로 변경
• 클래스를 추가해서 색상도 변경 -> ❤️
  근데 마우스가 안보임🤫
  
  

fontawsome에서 하트 아이콘 import

일단 폰트어썸페이지에서 리액트에서 사용할 수 있도록 설치파일 설치!
fontawesome react 설치페이지

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faHeart as regularHeart } from '@fortawesome/free-regular-svg-icons'; // ♡
import { faHeart as solidHeart } from '@fortawesome/free-solid-svg-icons'; // ♥︎

파일 상단에 먼저 import 해준다.
나는 ♡와 ♥︎ 두 가지를 사용 해야하기 때문에 regular/solid파일을 가져왔다.
html에서 fa-heart는 faHeart로 바꿔서 데려오면 되는데 하트 이름이 같아서 바꿔서 데려옴.

    <span id="heartIcon"
      <FontAwesomeIcon
      onClick={this.handleLike}
      icon={regularHeart}
     />
    </span>

일단 regularheart를 먼저 넣어주고 onClick이벤트에 handleLike라는 함수를 넣는다.

class Detail extends React.Component {
  constructor() {
    super();
    this.state = {
      likeHeart: false,
    };
  }

  handleLike = event => {
    this.setState({
      likeHeart: !this.state.likeHeart,
    });
  };

기본 state에 likeHeart 값을 false로 주고 클릭 시 true로 반환되게 함수를 썼다.

  <FontAwesomeIcon
     onClick={this.handleLike}
     icon={this.state.likeHeart ? solidHeart : regularHeart}
     className={this.state.likeHeart ? 'heart' : ''}
  />

아이콘에 삼항연산자를 이용해서 true면 solidheart, false면 regularheart가 되도록 했다.
scss에도 heart클래스를 따로 만들어서 this.state.likeheart값에 맞춰 클래스가 추가 되도록 했다.

heart스펠링을 haert로 잘못써서 왜 안되나 하고 한참을 헤맸다..
오타로 안되는게 왜 이렇게 많은지...🤦🏻‍♀️
항상 눈을 크게 뜨고 잘봐야지 👀