[프로젝트]블록체인 기반 중고차 거래 플랫폼 - 3 (구현)

기업 페이지

React-Query

• React-Query란?
  • React-Query는 상태관리 라이브러리 중 하나
  • 캐싱, 자동으로 재요청과 업데이트를 할 수 있는 것이 특징
  • client 데이터와 요청받은 데이터와의 분리가 쉽다.
  • 한 데이터 소스에서 작동하며 서버에서 반환된 데이터를 자동으로 캐시하고 필요한 경우 재사용할 수 있도록 최적화 한다.

company-repiar

• 예시코드

  const queryKey = `getRepairDetailData${id}`;
  const getRepairDetail = useAPI("get", URL, option); //custom hook
  const { data } = useQuery(queryKey, () => getRepairDetail, {
  cacheTime: 1000 * 300,
  staleTime: 1000 * 300,
  select: (data) => {
    return data.data.message;
  },
  onError: (error: Error) => {
    console.log(error);
  },
  
  enabled: false,
  });

  • useQuery('쿼리키 이름', 요청 액션, 옵션)
  • 옵션
    • cacheTime : 캐시를 저장하고 있을 시간
    • staleTime : 함수 작동 주기
    • select : response된 데이터로 부터 필요한 데이터만 선택 가능
    • onError : 에러가 났을 시 액션
    • suspense : react-suspense와 연동
    • enabled : 조건에 따라 액션
      • 보통 enabled: !!변수 이런식으로 많이 씀

비동기처리

• 나의 경우 페이지네이션을 했을 때 axios를 보내야하는데 url이 바껴도 애가 말을 듣지 않았다.

• 해결방법

  • refatch 사용

    const { data, refetch } = useQuery(queryKey, () => getReserveData, {
    cacheTime: 1000 * 300,
    staleTime: 1000 * 300,
    refetchOnWindowFocus: false,
    select: (data) => {
      console.log(data);
      return data.data.message;
    },
    onError: (error: Error) => {
      console.log(error);
    },
    suspense: true,
    });
    useEffect(() => {
    refetch();
    }, [page]);
    

  multi-part form-data

  const submit = () => {
    const formData = new FormData();
    formData.append("beforeImg", beforeImageFile);
    formData.append("afterImg", afterImageFile);
    formData.append("receiptImg", reciptImageFile);
    formData.append("repairBook.id", id);
    formData.append("content", content);
    formData.append("mileage", 연비);
    formData.append("inspectDt", selectTime);
  
    if (
      beforeImageFile &&
      afterImageFile &&
      reciptImageFile &&
      reciptImageFile &&
      content &&
      연비 &&
      selectTime
    ) {
      mutate(formData);
      Toast.fire({
        icon: "success",
        title: "등록이 성공적으로 완료됐습니다.",
        didClose: () => navigate(isGarage ? "/garage" : "/inspector"),
      });
    } else {
      Toast.fire({
        icon: "error",
        title: "모든 항목은 필수입니다.",
      });
    }
  };

  • 문제

    • java에서 model attribute형태로 받았는데 형식 또는 이름이 맞지 않다고함

  • 원인과 해결

    • axios를 사용했을 때 res에 담겨서 주는 것이 문제
    • model attribute를 사용했기에 매칭되지 않으면 내부로 접근 불가능
    • axios대신 fetch로 변경

구현 결과