React_좋아요 기능

 

0. Like& DisLike 버튼 만들기

: LikeDislikes 컴포넌트를 actions=[ ] 안에 '콤마'를 이용해서 넣는다.

const actions=[

        <LikeDislikes commentId={props.comment._id} userId={localStorage.getItem('userId')}/> ,

        <span onClick={onClickReplyOpen} key="comment-basic-reply-to">Reply to</span>

    ]

: Tooltip, Icon antd 이용

 

 

1. 현재 video or comment에 대한 '좋아요'('싫어요') 개수 불러오기

  1) userId와 comment or video Id를 axios 하기

      : let 변수에 if문으로 props에 video가 있는지 확인한 후 video Id or comment Id를 전송한다.

  2) comment Id >> Single comment 에서 props.comment 불러온 정보에 _id

  3) server에서 comment or videoId에 대한 like 정보를 불러옴

  4) client에서 response.data의 length가 '좋아요'의 개수다. (useState에 할당)

 

 

2. 현재 video or comment에 대해 로그인한 user가 '좋아요'('싫어요') 했는가?

  1) server의 정보를 mapping 해서, props.userId와 동일한 정보가 있는지 확인

response.data.likes.map((like, i)=>{

                        if(like.userId === props.userId){

                            setLikeAction('liked')

                        }

                    })

 

  2) useState에 'liked' ('disliked')로 표기

      : initialState 값 = null

 

3. 좋아요 Icon theme에 삼항식으로 표기

: theme= {LikeAction === 'liked' ? 'filled' : 'outlined'}