TIL51-01 class Name을 활용 하여 liked, unliked 다르게 출력하기

좋아요 표시

• 좋아요 표시를 하려면 여러 방법이 있지만 class Name에 따라 값을 달리 주는 방법을
  해보았다.

<LikeButton
              className={isLiked === true ? 'liked' : 'unLiked'}
            />


//스타일드 컴포넌트 부분
const LikeButton = styled.button`
  width: 0.9375rem;
  height: 0.9375rem;
  margin-right: 0.25rem;
  &.liked {
    background: url(이미지 URL)
      center center no-repeat;
  }
  &.unLiked {
    background: url(이미지 URL)
      center center no-repeat;
  }
`;

• liked 일때
  

• unliked일 때