[react-query] 어드민 페이지 조회기능 react-query 도입하기

혼자 간단한 어드민 페이지를 개발하는 업무를 맡고 있는데 그래서 기술스택도 자유롭게 도입해보고 있다.

페이지네이션, 조회기능을 구현하며 react-query를 도입했는데 너무 놀라운 기술이라 쓰면서 감탄했다...

react-query 적용전

처음에는 useState,  useEffect, axios, onClick 이벤트로 구현했다.

나름 각 메뉴가 한 컴포넌트에서 조회기능을 수행할 수 있게 공유하여 useState도 객체화하여 최대한 좋은 코드를 만드려고 노력했었다.

- 페이지마다의 useState를 설정해주고

  const [tableData, setTableData] = useState({
    clientReport: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
    bridgeReport: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
    commentReport: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
    inquiry: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
    FAQ: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
    announce: {
      table: [],
      totalPage: 0,
      totalCount: 0,
    },
  });

- useEffect로 초기 테이블을 그려줬다.

  useEffect(() => {
    (async () => {
      const { data } = await axios.get(`api?page=${page[menu]}`);

      setTableData(prev => ({
        [menu]: {
          ...prev[menu],
          table: data.data,
          totalPage: data.totalPage,
          totalCount: data.totalCount,
        },
      }));
    })();
  }, [menu, page]);

- 조건들을 선택 후 Click하면 테이블을 업데이트 시켜줬다.

 const ClickSearchBtn = useCallback(async () => {
    (async () => {
      const { data } = await axios.get(`api?page=${page[menu]}`,
        { params }
      );
      
      setTableData(prev => ({
        [menu]: {
          ...prev[menu],
          table: data.data,
          totalPage: data.totalPage,
          totalCount: data.totalCount,
        },
      }));
    })();
  }, [menu, page, params]);

그런데도 정말 길고 복잡했다.

react-query 적용후

 const { data, isLoading, isError, error, refetch } = useQuery(
    ['clientSearch', page[menu]],
    async () => await axios.get(`api?page=${page[menu]}`)
  );

한줄로 끝났다....

useState, useEffect가 필요없다.

조건들을 선택 후 Click하는 것도 검색버튼에 onClick이벤트로 refetch해주면 끝이다.

<SearchButton onClick={() => refetch()}>
  검색
</Style.SearchButton>

---

하루가 다르게 프론트엔드의 기술은 발전한다.

도태되지 않으려면 프론트엔드 개발자는 기술 트렌드에 꾸준히 관심을 가지고 있어야한다고 생각한다.

그래서 나도 새 기술을 공부하는데 두려움을 가지지 않고 시도해서 도입하려 노력하고 있다.

 

react-query를 익히기 위해 공식문서, 여러 블로그, 유튜브 등을 적극적으로 참고했다.

노션에 정리해 놓았던 블로그 링크들이다.

 

앞으로도 이렇게 꾸준히 발전하는 프론트엔드 개발자가 되고싶다 : )

이 글들 덕분에 알게된 React-Query도 정리해서 대한 블로깅 해야겠다 ㅎㅎ