[react & firebase] 게시물 좋아요 카운팅, 유지, on/off 하는 법

 

1. 파이어스토어 > 게시물 콜렉션 > 좋아요 필드 추가

- 게시물을 생성할 때, 게시물마다 좋아요 수 및 좋아요한 유저(id)를 담을 수 있는 배열 추가.

- 업데이트 될때마다 관련없는 데이터까지 불러오는게 싫으면 콜렉션을 따로 만들어도 됨.

    /* firestore 추가 */

    const docRef = await addDoc(collection(db, "feeds"), {

      createdAt: Timestamp.now(),

      creatorId: nowUser.id,

      feedText: feedText,

      imgUrl: imgUrl,

      nickName: nowUser.nickName,

      likes: {

        likeUsers: [],

        likeCount: 0,

      },

      comments: [],

    });

 

아래처럼 추가됨

 

 

2. 좋아요 on/off

불리언 타입의 STATE로 스위치 만들어 줌.

  /* 좋아요 on/off 및 개수 업데이트 */

const [isLiked, setIsLiked] = useState(false);

 

const handleLike = async () => {

    setIsLiked((prev) => !prev);

  };

 

return <div id="like" className={styles.buttons} onClick={handleLike}>

            {isLiked ? (

              <i class="fa-solid fa-heart"></i>

            ) : (

              <i class="fa-regular fa-heart"></i>

            )}

          </div>

 

 

 

 

3. 좋아요 수 업데이트

조건

1) 좋아요 on: 좋아요를 안한 상태로 클릭, 좋아요 누른 표시로 변경 & 좋아요 카운트 +1  

2) 좋아요 off: 좋아요를 한 상태로 클릭, 좋아요 안누른 표시로 변경 & 좋아요 카운트 -1

 

 

스위치

1) handleLike 함수에 likeFeed 추가하여 스위치 누를때마다 동작

  /* 좋아요 on/off 및 개수 업데이트 */

  const handleLike = async () => {

    await likeFeed(feed, isLiked, nowUser, setLikesCount);

    setIsLiked((prev) => !prev);

  };

 

 

파이어베이스 & likeCount STATE 에 업데이트 

- getDoc 으로 현재 저장된 likeCount & likeUsers 가져오기

- 스위치에 따라 likeCount +, - 결정

- 스위치에 따라 likeUser 배열에 현재 접속한 유저의 id 추가할지 뺄지 결정

/* 5. 피드 좋아요 on/off 및 좋아요 수 업데이트 */

export const likeFeed = async (feed, isLiked, nowUser, setLikesCount) => {

  // 문서 위치

  const feedRef = doc(db, "feeds", feed.id);

  // Firestore에서 현재 문서 데이터를 가져옵니다.

  const docSnapshot = await getDoc(feedRef);

  // 기존 'likeCount'와 'likeUsers' 필드 값 가져오기

  const currentLikeCount = docSnapshot.data().likes.likeCount;

  const currentLikeUsers = docSnapshot.data().likes.likeUsers;

  const updatedLikeCount = isLiked

    ? currentLikeCount - 1

    : currentLikeCount + 1;

  // 'likeCount'와 'likeUsers' 필드 업데이트

  const updatedLikeField = {

    likes: {

      likeCount: updatedLikeCount,

      likeUsers: isLiked

        ? currentLikeUsers.filter((userId) => userId !== nowUser.id)

        : [...currentLikeUsers, nowUser.id],

    },

  };

  // 업데이트된 'likeCount'와 'likeUsers' 필드를 문서에 저장

  await updateDoc(feedRef, updatedLikeField);

  /* 좋아요 개수 업데이트 */

  setLikesCount(updatedLikeCount);

};

 

 

 

4. 좋아요 여부 및 좋아요 수 가져오기

조건

1) 최신 업데이트된 값을 불러온다.

2) 게시물 좋아요는 본인이 누른 것만 표시가 되어있다.

3) 좋아요 누르면 카운트가 즉시 올라간다. (즉시 랜더링)

 

 

좋아요 여부와 개수 가져오기

useEffect로 피드에 변경이 있을 때마다 & 접속 유저가 변경될 때마다 파이서베이스에 저장된 피드별 likeCount & likeUsers 불러 옴

  useEffect(() => {

    /* 좋아요 여부 가져오기 */

    isLikedUser(feed, setIsLiked, nowUser);

    /* 좋아요 개수 가져오기 */

    const fetchLikeCount = async () => {

      setLikesCount(await countLikes(feed));

    };

    fetchLikeCount();

  }, [feed, nowUser]);

 

 

파이어스토어에서 불러오기

/* 6. 좋아요 여부 가져오기 */

export const isLikedUser = async (feed, setIsLiked, nowUser) => {

  // 문서 가져오기

  const feedRef = doc(db, "feeds", feed.id);

  const docSnapshot = await getDoc(feedRef);

  // 해당 피드에 좋아요한 유저 id 가져오기

  const users = docSnapshot.data().likes.likeUsers;

  // 그 중 현재 접속 유저의 id가 있는지 true/false 담아주기

  setIsLiked(users.includes(nowUser.id));

};

/* 7. 좋아요 개수 읽기 */

export const countLikes = async (feed) => {

  /* 문서 가져오기 */

  const feedRef = doc(db, "feeds", feed.id);

  const docSnapshot = await getDoc(feedRef);

  // 개수 리턴하기

  return docSnapshot.data().likes.likeCount;

};

 

 

작업중인 인스타그램 클로닝