[22.02.17] TIL

https://www.youtube.com/watch?v=pjakE0D4CeI&list=PLVsNizTWUw7FfOQedudGOz1N3bjt6iM0D&index=13

 

리액트쿼리가 점점 익숙해져간다. 쭉쭉 진도를 나가다가 발생한 이슈로 오늘 배운 것이다.  리액트의 생명주기.

항상 이것때문에 문제인데 계속 같은문제로 에러를 접해도 뭔가 애매~하다.

 

오늘은 구매자,판매자가 거래취소를 누르면 각각 cancel data가 true가 되고, 두 cancel data가 다 true가 되면 구매한 금액만큼을 구매자에게 더해주는 환불로직을 만들었다.

 

근데 취소버튼 onClick에 두 cancel버튼을 각각 누르면 true로 변하는 것 까진 짰는데,

구매자에게 돈이 돌아가지 않는 이슈가 발생했다.

왜그런건가 콘솔을 요리조리 찍어보며 내린 결론은 if문 안의 조건문이 렌더링 문제로 true로 바뀌지 않아서 작동하지 않았던 것,

그래서 돈 돌려주는 if문 로직만 따로 onClick에서 빼고, useEffect에 넣어줬다. 의존성배열은 해당 데이터가 바뀌는 데이터 이름을 넣어줬다.

결과적으로 잘돌아간다.

튜터님이 추천해주신 위의 영상을 보고 오늘은 마치려고 한다.

 

마지막으로 완성된 useEffect 코드

    const { data, isLoading } = useQuery(['salePost', id], async () => {
    // 쿼리키는 중복이 안되야 하기에 detail페이지는 저렇게 뒤에 id를 붙혀서 쿼리키를 다 다르게 만들어준다.
    const response = await axios.get(
      `http://localhost:4000/onSalePosts?id=${id}`
    );
    return response.data;
  });
  
  // 취소 시 구매자의 point를 복구시켜주는 함수
  const { mutate: giveBackPoint } = useMutation(
    (newUser: { point: string }) =>
      axios.patch(`http://localhost:4000/users/${data?.[0].buyerUid}`, newUser),
    {
      onSuccess: () => queryClient.invalidateQueries(['buyerData']),
    }
  );
  
  // 둘다 취소하면 포인트를 구매자에게 돌려줍니다.
  useEffect(() => {
      if (data?.[0].isSellerCancel && data?.[0].isBuyerCancel) {
        giveBackPoint({
          point: String(Number(buyerData?.point) + Number(data?.[0].price)),
        });
      }
  }, [data]);

{
      "id": "9d3045d3-7d6c-49c1-b7e0-4b150e928017",
      "postsId": "9432588a-88a9-47a4-ab5c-cdca00341b2d",
      "buyerUid": "Qh8zrzAwjMWSYXSSDJYIWIzpLZ13",
      "sellerUid": "DSF5axJJNDUvd5bGXoUwrmbvtyj2",
      "title": "숙제풀어드려요",
      "content": "1문제당 1000원",
      "imgURL": [],
      "price": "1000",
      "category": "study",
      "ceatedAt": 1676621674937,
      "isDone": false,
      "isSellerCancel": true, // 판매자가 취소
      "isBuyerCancel": false, // 구매자가 취소
      "views": 0,
      "like": []
    }