[TIL] 내일배움캠프 React 과정 2024.06.07

오늘의 한 일

• 발라드 커뮤니티 (팀 프로젝트)
  • 게시글 추천 기능
  • 수정 페이지 css
  • 기능 구현 완료
  • 발표
• 팀 프로젝트 정보
  • Notion
  • Github

오늘의 문제

게시글 추천 기능

• 어제 진행했던 댓글은 데이터베이스 구현 문제 때문에 시관 관계상 후순위로 미루고 게시글의 추천 기능을 구현하기로 했다.
• 어제 튜터님께 들었던 조언을 토대로 추천을 눌렀는지 여부와 추천 숫자를 state로 변경시키고 특정 시점에 supabase(백엔드)에 데이터를 업로드하는 로직을 구현하기로 했다.
• 문제는 특정 시점인데 팀원 분인 unmount 될 때 데이터를 업로드하는 아이디어를 주셨다.

  useEffect(() => {
    const increasedViews = post.views + 1;
    const increasePostView = async (increasedViews, postId) => {
      await updatePostViews(increasedViews, postId);
    };
    const increaseLikeNum = async (postId, userId) => {

      await insertLikeUser(postId, userId);
    };

    const decreaseLikeNum = async (postId, userId) => {
      await delLikeUser(postId, userId);
    };
    return () => {
      increasePostView(increasedViews, postId);
      if (user && !isDataHasUser && isLike) increaseLikeNum(postId, userId);
      if (user && isDataHasUser && !isLike) decreaseLikeNum(postId, userId);
    };
    //eslint-disable-next-line
  }, []);

  const handleLikeClick = () => {
    if (user) {
      if(isLike){
        setIsLike(false);
        setLikeNum((prevNum) =>prevNum - 1);
      }
      else {
        setIsLike(true);
        setLikeNum((prevNum) => prevNum + 1);
      }
    } else {
      navigate('/login');
    }
  };

아이디어로 제작한 코드

• 클라이언트의 state는 handleClick에서 관리한다.
• 컴포넌트가 unMount 될 때 state를 바탕으로 데이터를 업로드 한다.

첫 번째 문제 발생

• 그러나 문제가 있었으니 useEffect에서 state 정보를 가지고 있지 않다는 것이었다...

• 그렇다면 useEffect에 state 정보를 전해주면 되는거 아닌가?

  useEffect(() => {
    const increasedViews = post.views + 1;
    const increasePostView = async (increasedViews, postId) => {
      await updatePostViews(increasedViews, postId);
    };
    const increaseLikeNum = async (postId, userId) => {

      await insertLikeUser(postId, userId);
    };

    const decreaseLikeNum = async (postId, userId) => {
      await delLikeUser(postId, userId);
    };
    return () => {
      increasePostView(increasedViews, postId);
      if (user && !isDataHasUser && isLike) increaseLikeNum(postId, userId);
      if (user && isDataHasUser && !isLike) decreaseLikeNum(postId, userId);
    };
    //eslint-disable-next-line
  }, [isLike]);

의존성 배열에 isLike라는 state를 넣은 코드

• 이제 useEffect에서도 state 정보가 제대로 전달되었고, 동작도 잘 된다.
• 그럼 이제 진짜로 문제가 해결된 걸까??

두 번째 문제 발생

• 그러나 위의 코드에도 문제가 있다
• 바로 처음에 작성한 코드의 의도에 벗어나는 것!
  • 좋아요 버튼을 누를 때마다 백엔드와 통신하지 않는 것
  • 그러나 위의 코드에서는 isLike가 바뀔 때마다 useEffect가 실행 되므로 결과적으로는 버튼을 누를 때마다 백엔드와 통신하게 된다...

그렇다면 더 좋은 방법이 없을까??

• 안타깝게도 프로젝트를 제출한 지금까지도 좋은 방법을 찾지 못하였다..
• 다른 분들의 좋아요 기능은?
  • useCallback을 사용하는 방법을 보긴 하였으나 내 의도와 맞는 방법인지는 아직 판단이 서지 않는다.
  • 튜터님께 물어보고 싶지만 어제, 오늘 물어볼 시간이 없어서 추후에 물어보고 싶다.

오늘의 회고