[React] 좋아요 버튼 기능 구현하기

요즘 쇼핑몰이나 SNS에서 좋아요 버튼이 없는 곳이 없으니까
한번 정리해두면 나중에 유용하게 써먹을 것 같아서 정리해볼 생각이다.

<a role="button" className="btn-ico" onClick={handleLike}>
    <i className={`heart ${LikeData.is_like && "on"}`}></i>
    <span>좋아요</span>
</a>

먼저 좋아요 버튼을 UI로 볼 수 있게 작업을 해놨다.

미리 만들어 둔 api response로 is_like를 true, false로 오게 하고
true이면 on에 css를 먹게 하여 채워진 하트로
false이면 on이 먹지 않게 할 생각이다.

// 상품 좋아요 핸들러
const handleLike = async () => {
    // 좋아요 취소
    if(likeData.is_like) {
        await delete(`/app/${idx}/like`);
    }
    // 좋아요
    else {
        await post(`/app/${idx}/like`);
    }
    getDetail();
}

이렇게 handleLike로 버튼 구현을 하면
true일 때는 if문을 타서 좋아요 취소 api가 호출 되고
false일 때는 else 문을 타서 좋아요 api가 호출 된다

그러고 다시 상세 정보를 불러오면?
바로바로 좋아요랑 취소가 적용되기때문에
useEffect를 안써도 돼서 아주 간단하고 좋은 방법이다.