아웃소싱 팀 프로젝트 ② - 기능구현(따봉)

 

피드 게시물의 따봉 버튼을 클릭했을 때 숫자 1이 올라가고 색깔이 채워진 손모양이 나오도록 구현하고자 했다.

 

🚨 발생한 문제

patch 메서드로 db.json에 있는 thumb 데이터를 수정하고자 했는데 patch 는 실행이 되었지만 페이로드가 빈값이어서 값 변경이 안되었다. 값 전달이 어디서 잘못되었는지 한참 헤맸다.

 

작성했던 코드

// json-server 에 patch 로 api 통신한 코드
export const updateThumb = async (FeedId, newThumb) => {
  await feedInstance.patch(`/feed/${FeedId}`, newThumb);
};

 

버튼의 onClick 이벤트에 addThumb(currentFeedId, { thumb: thumbCount }) 로 인자를 보내줬다고 생각했는데 patch는 성공하지만 payload 는 빈 객체였다.

// Thumb.jsx
 const Thumb = ({ currentFeedId, currentThumb }) => {
  const [isClicked, setIsClicked] = useState(false);
  const [thumbCount, setThumbCount] = useState(currentThumb);
  const updatedThumbCount = isClicked ? thumbCount - 1 : thumbCount + 1;
  const queryClient = useQueryClient();

  const handleThumb = () => {
    setIsClicked((prev) => !prev);
    setThumbCount(updatedThumbCount);
  };

  const { mutate: addThumb } = useMutation({
    mutationFn: updateThumb,
    onSuccess: () => {
      queryClient.invalidateQueries(["feed"]);
    }
  });

  return (
    <div>
      <button
        onClick={() => {
          handleThumb();
          addThumb(currentFeedId, { thumb: thumbCount });
        }}
      >
        {isClicked ? <p>클릭됨</p> : <p>클릭안됨</p>}
      </button>
      {thumbCount}
    </div>
  );
};

export default Thumb;

 

 

✅ 해결 방법

useMutation의  mutationFn을 updateThumb 로만 작성하는게 아니라, updateThumb에 콜백함수 쓰듯이 매개변수로 id를 넣어주고 인자에 id와 전역변수인 thumbCount를 넣어주었다. thumbCount를 updateThumb에 직접 넣어주었으므로 addThumb에는 줄필요가 없어서 currentFeedId 만 인자로 넣어주었더니 페이로드가 잘 들어간 것을 확인할 수 있었다.

db.json에도 patch가 정상적으로 잘 적용되었다.

 

수정한 코드

const Thumb = ({ currentFeedId, currentThumb }) => {
  const [isClicked, setIsClicked] = useState(false);
  const [thumbCount, setThumbCount] = useState(currentThumb);
  const updatedThumbCount = isClicked ? thumbCount - 1 : thumbCount + 1;
  const queryClient = useQueryClient();

  const handleThumb = () => {
    setIsClicked((prev) => !prev);
    setThumbCount(updatedThumbCount);
  };

  const { mutate: addThumb } = useMutation({
  // id를 매개변수로 받고 인자로 id와 thumbCount를 넣어줌
    mutationFn: (id) => {
      updateThumb(id, thumbCount);
    },
    onSuccess: () => {
      queryClient.invalidateQueries(["feed"]);
    }
  });

  return (
    <div>
      <button
        onClick={() => {
          handleThumb();
          addThumb(currentFeedId);
        }}
      >
        {isClicked ? <p>클릭됨</p> : <p>클릭안됨</p>}
      </button>
      {thumbCount}
    </div>
  );
};

 

https://tanstack.com/query/v3/docs/framework/react/reference/useMutation

• mutationFn: (변수: TVariables) => Promise<TData>
  • 필수의
  • 비동기 작업을 수행하고 약속을 반환하는 함수입니다.
  • 변수는 mutate가 mutationFn 에 전달할 객체입니다 .

 

🥲 느낀점

useMutation 부분이 아니라 mutate 인 addThumb의 인자로 뭔가를 잘못 넣어줬다고 생각해서 계속 이부분만 파고 검색하고 했었다.

어떻게 보면 간단한 부분이었는데 잘 못찾아서 엄청 헤맸다..ㅠ 앞으로 뭔가 안될때 그 부분과 엮여있는 코드 하나하나 다 뜯어봐야겠다고 느꼈고 탠스택쿼리도 좀 더 익숙해지도록 연습해야겠다.