[React] React Query의 후처리를 어디서 하는 게 나을까?

배경

매치번호 유효성 검증 api 요청에 대한 성공,실패 후처리(매치 인증 플래그 변경 후처리 필요)를 개발하고 있었다.

개발 도중 React Query 후처리를 어디서 하는 게 나을까?? 라는 고민이 생겼따.

 

 

고민

1. Component에서 처리

2. Custom Hook에서 처리

 

위 두 방안에 대해 예시와 장단점을 파악해보자

---

1. Custom Hook 처리

useFetchGetMatch.ts

export const useFetchGetMatch=(matchNo:number,setIsMatchNoAvailable:React.Dispatch<React.SetStateAction<boolean>>)=>{
    return useQuery({
        queryKey:["plabMatchNo",{matchNo:matchNo}],
        queryFn: ()=>fetchGetPlabMatch(matchNo),
        enabled:false, 
        onSuccess() {
          // 커스텀 훅에서 후처리 ..
          setIsMatchNoAvailable(true);
        },
        onError:(error:any)=>{
           // 커스텀 훅에서 후처리 ..
           setIsMatchNoAvailable(false);
        }
    });
}

 

NotiReg.tsx

const NotiReg = () => {
  // 매치 인증 플래그
  const [isMathcNoAvailable, setIsMathcNoAvailable] = useState(false);

  // 커스텀 훅에서 후처리 위해 set메소드 인자로 넘김
  const getMatch = useFetchGetMatch(getValues('matchNo'),setIsMathcNoAvailable);

  const clickedValidBtn = async () => {
    await getMatch.refetch(); //api 요청
  };

  return (
    </Box>
      <TextField {...register('matchNo')} />
      <Button onClick={clickedValidBtn}>
        인증
      </Button>
    </Box>
  );
};

export default NotiReg;

 

Component가 굉장히 가벼워 보이고 코드량도 상당히 줄었으며, 후처리에 대한 로직이 Custom Hook에 들어가 있어 쉽게 파악은 가능하다.

그러나, Custom Hook이 상태(setState)와 강하게 결합되어 있으며, 만약 다른 Component에서 재사용해야할 경우 후처리가 달라져야 한다면  새로운 Custom Hook을 작성해 주어야 한다.(재사용 불가)

 

 

2. Component 처리

useFetchGetMatch.ts

export const useFetchGetMatch=(matchNo:number,onSuccess:()=>void,onError:(error:any)=>void)=>{
    return useQuery({
        queryKey:["MatchNo",{matchNo:matchNo}],
        queryFn: ()=>fetchGetMatch(matchNo),
        enabled:false, 
        onSuccess:onSuccess,
        onError: onError
    });
}

 

NotiReg.tsx

const NotiReg = () => {
  // 매치 인증 플래그
  const [isMathcNoAvailable, setIsMathcNoAvailable] = useState(false);

  const onGetMatchSuccess = ()=>{
    //후처리 ..
    setIsMathcNoAvailable(true);
  }
  const onGetMatchError = (error:any)=>{
    //후처리 ..
    setIsMathcNoAvailable(flase);
  }
  const getMatch = useFetchGetMatch(getValues('matchNo'),onGetMatchSuccess,onGetMatchError);

  const clickedValidBtn = async () => {
    await getMatch.refetch(); //api 요청
  };

  return (
    </Box>
      <TextField {...register('matchNo')} />
      <Button onClick={clickedValidBtn}>
        인증
      </Button>
    </Box>
  );
};

export default NotiReg;

 

UI마다 후처리는 상이할 수 있으므로 다른 Component에서도 후처리 로직을 해당 Custom Hook의 인자로 보낼 수 있기에 재사용할 수 있다.

또한, React Query의 서버 상태 관리에 집중할 수 있다라는 본래 취지에 부합하기에 데이터를 요청하는 책임만 지니게 된다.

 

 

고민

Component 후처리 방식
같은 API라도 후처리가 다를 시 유연성 있게 재사용 가능
역할 명확(Custom Hook은 api 요청, Componet는 UI/상태 처리)