좋아요숫자를 어떻게 가지고 올것인가 TIL

영상 박스마다 좋아요 갯수가 밑에 뜨도록 하기위해서 비디오영상 component안에 좋아요값을 넣으려고하는 상황이였다.

아래는 프로젝트 db구조 ✅

{
  "posts": [],
  "comments": [],
  "profile": [],
  "likes": [
   "contentID": ...,
    "userID": ...,
    "id" :...
  ],
  "User": [],
  "videos": [
   "id": "",
   "contentId": "",
   "createAt": "",
   "time": "2023. 1. 28.",
   "userId": "",
   "nickName": "999999",
   "videoUrl": "",
   "title": "삼등삼등",
   "content": "삼등삼등"
  ]
}

1.내가 만난 문제

useQuery로 가져오고 있는 "videos"는 "likes"의 정보를 가지고 있지 않다. 그럼 이 likes의 수를 어떻게 가지고 올 것인가.

 

2.시도

•  videos 안의 id와 일치하는 likes데이터의 contentID를 찾은 다음 likes안에서 일치하는 contentID의 갯수를 들고온다.
• map을 돌려야되지 않을까 라는 생각에 박혀서 다른 메소드를 쓸 생각을 못함ㅜ  ->이런생각이 더 복잡하게 만들었던것 같다.
• 데이터구조를 바꾼다...(이건 나의 혼자만의 생각💧)

3.해결

생각보다 가져오는 건 간단했다.
1.먼저 videoBox component로 "video" data를 props로 넘겨주고 그 data.id와 "likes"의 contentID가 같은것을 찾는다.
2.filter를 사용한다.  -> 위의 두 id가 같은 갯수를 가져온다.

  //좋아요갯수 가지고 오는 함수
  const num = data?.filter((value) => {
    return value.contentID === item.id;
  }).length;
  
  
  //가져올 숫자가 없는경우 하트를 없앤다.
<div style={{
      display: "flex",
      marginRight: "10px",}}>
   {num <= 0 ? null : (
        <FcLike onClick={() => {
                alert("");
            }} style={{ fontSize: iconSize }}
            />
          )}
  
  //가져올 값이 없을 경우 숫자가 뜨지 않도록
  <span style={{ fontSize: iconSize, marginLeft: "5px" }}>
         {num > 0 ? num : null}
  </span>

 

4.얻은 점

이렇게 해야되지않을까라는 생각에 박혀서 다른 메소드를 충분히 생각하지 못한점

다양하게 상황에따라서 적절한 메소드를 가져와서 쓰는 것이 필요하니까 이러한 능력도 길뤄야겠다.

그럴려면 자바스크립트 공부 쫌 더 하자!😎