Trouble

좋아요 버튼을 눌렀을 때, firestore안에서 좋아요 수 만 바로 업데이트 되지 않고, 해당 내용이 버튼을 다시 눌렀을 때 반영이 되었다.

문제가 되었던 코드

const [like, setLike] = useState(false);
const [likeCount, setLikeCount] = useState<number | any>(0);

const submitLike = async () => {
    if (!authService.currentUser) {
      setLike(false);
      alert("좋아요는 로그인 후 이용가능합니다.");
      return;
    }
    if (like === true) {
      setLike(false);
      setLikeCount(likeCount - 1);
		  await updateDoc(courseRef, {
          likes: likeCount,
          likesID: arrayRemove(currentId),
        });
    } else if (like === false) {
      setLike(true);
      setLikeCount(likeCount + 1);
		  await updateDoc(courseRef, {
          likes: likeCount,
          likesID: arrayUnion(currentId),
        });
    }
  };

문제 원인

state는 새롭게 렌더링 될 때 바뀌는데, lifecycle 기준으로 redering이 아직 일어나지 않아 likeCount 값이 변화되지 않은 상태로 updateDoc이 실행되었기 때문이었다.

해결

그러므로, like, likeCount 가 변화되었을 때, 리렌더링하여 바뀐 likeCount값이 업데이트 될 수 있도록, 아래와 같이 useEffect 안에 updateDoc 로직을 넣음으로써 해결할 수 있었다.

해결한 코드

const [like, setLike] = useState(false);
const [likeCount, setLikeCount] = useState<number | any>(0);

const submitLike = () => {
    if (!authService.currentUser) {
      setLike(false);
      alert("좋아요는 로그인 후 이용가능합니다.");
      return;
    }
    if (like === true) {
      setLike(false);
      setLikeCount(likeCount - 1);
    } else if (like === false) {
      setLike(true);
      setLikeCount(likeCount + 1);
    }
  }; // 버튼을 눌렀을 때 submitLike 라는 함수가 실행된다.
  useEffect(() => {
    const updateLikes = async () => {
      if (like) {
        await updateDoc(courseRef, {
          likes: likeCount,
          likesID: arrayUnion(currentId),
        });
      } else {
        await updateDoc(courseRef, {
          likes: likeCount,
          likesID: arrayRemove(currentId),
        });
      }
    }; // useEffect 안에 바로 aynsc await 쓸 수 없기 때문에 함수 생성
    updateLikes();
  }, [like, likeCount]); // like, likeCount가 바뀔 때 다시 한번 렌더링

// => submitLike를 눌렀을 때 like, likeCount가 바뀌면서 전체 코드를 다시 한번 읽어, 이전값과 비교해서 state값이 바뀌었다면 바뀐 값을 기준으로 실행된다. 

<aside> ⭐ 컴포넌트는 return하는 부분에서 렌더링 된다. useEffect에서 의존성 배열에 값을 넣으면 렌더링 되는 부분에서 의존성배열 안의 값이 바뀔 때 다시 렌더링이 되는데, 의존성 배열 안의 값이 이전값과 비교해서 바뀌었다면 바뀐 값을 기준으로 실행된다.

</aside>