React-query 서버데이터 커스텀 (useQuery with select)

위 사진은 프로젝트에 신청한 지원자 및 프로젝트 팀원을 전체적으로 관리하는 모달 입니다.  첫번째로 지원현황,팀원관리 에 따라 모달의 뷰가 바뀌어야하며 포지션별로도 화면이 바뀌어야하기 때문에 초기 구상당시에는 구현이 약간 어려울지도 모르겠다고 생각이 들었었습니다.

 

서버데이터 양식은 크게 객체안에 포지션별로 있고 포지션별객체안에는 각 지원자들 그리고 총 지원자들의 수가 있습니다. 

 

모달에서 백엔드포지션을 누르면 백엔드를 지원한 지원자들의 데이터만 보여주어야 하기때문에 한번에 받아오는 데이터를 적절하게 걸러줄 필요성이 있었습니다.

 

저는 이를 해결하기위해 useQuery 안에 내장되어있는 select 를 사용하여 해결하였습니다.

 

기본적으로 useQuery 를 사용하여 서버데이터를 fetch 하는양식은 이와 같습니다.

function Example() {
  const { isLoading, data } = useQuery({
    queryKey: ['repoData'],
   fetcher
  })

useQuery 의 객체 파라미터로 쿼리키와 데이터를 fetch해오는 fetcher 함수가 들어가게 됩니다. 

isLoading 는 데이터를 받아오는중인 상태값을 나타대며 data가 완전히 받아와지면 false가 됩니다.

data는 fetcher 함수를 통하여 서버와 통신한 데이터 가 반환되어집니다.

isLoading 말고도 많은 상태값을 표현할수있는 좋은 상태값들이 많으니 이는 React-query 공식문서를 참조하면 좋을것같습니다.

 

저는 api요청마다 포지신별로 보여줘야하는값들이 다르기때문에 적절히 데이터를 커스텀할수있는 select 옵션을 사용하였습니다.

 

  const getApplicantData = async () => {
    const response = await axios.get(
      `${process.env.NEXT_PUBLIC_API_URL}/applicant/list/28?status=${value}`,
    );
    return response.data;
  };

getApplicantData 함수는 서버에 해당 프로젝트의 팀원,지원자 현황데이터를 불러오는 함수로 이함수는 fetcher 가 됩니다.

  const {
    data = { applicants: [], positions: [], applicantNum: {} },
    isLoading,
  } = useQuery(["ApplicantData", value], getApplicantData, {
    select: (data) => {
      const applicantNum: { [key: string]: number } = {};
      for (const position in data) {
        applicantNum[position] = data[position].size;
      }
      return {
        applicants: data[positionValue].applicants,
        applicantNum,
        positions: Object.keys(data).sort(),
      };
    },
  });

쿼리키배열에 첫번째 쿼리키이름이되는 스트링값 말고 두번째요소에 상태가 들어가있습니다.

두번째 요소는 value에 따라 데이터를 가져오기 위한 추가정보입니다. 

다음으로 select 를 통하여 커스텀한 데이터들을 설명드리겠습니다.

 

applicants : 각 포지션별 지원자들의 정보가 담긴 데이터

applicantNum : 각 포지션별 지원자수 및 팀원수

positions : 각 포지션별 필터를 만들어주기위한 데이터 

 

const FILTER_TAB = [
  { name: "지원현황", value: "pending" },
  { name: "팀원관리", value: "approved" },
];

export default function ManageTeamModal() {
  const [currentTab, value, handleFilterTab] = useFilterTab(0, "pending");
   const [positionTab, positionValue, handlePositionFilterTab] = useFilterTab(
    0,
    "FRONTEND",
  );
  ...

위에서 쿼리키배열 두번째 요소에 사용된 value 라는 값은 지원현황,팀원관리 데이터를 받아올때 필터로 구분해주기위하여 정의한 값입니다. 또한  positionValue 값은 각 포지션별 데이터를 필터해주기위한 값입니다.

이 로직들을 추상화 하기위하여 useFiltertab 이라는 커스텀훅을 만들어서 사용하였습니다.

import { useState } from "react";

export const useFilterTab = (index: number, name: string) => {
  const [currentTab, setCurrentTab] = useState(index);
  const [value, setValue] = useState(name);
  const handleFilterTab: any = (index: number, name: string): void => {
    setCurrentTab(index);
    setValue(name);
  };

  return [currentTab, value, handleFilterTab];
};

커스텀 데이터로 화면을 랜더링한결과물

select 옵션을 사용하여 커스텀한 데이터입니다. 데이터에 맞게 화면이 랜더링이 잘되는 모습을 볼수가 있습니다.