-
[react-query] 어드민 페이지 조회기능 react-query 도입하기프론트엔드 개발자가 될거야./react 2023. 1. 24. 17:37
혼자 간단한 어드민 페이지를 개발하는 업무를 맡고 있는데 그래서 기술스택도 자유롭게 도입해보고 있다.
페이지네이션, 조회기능을 구현하며 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도 정리해서 대한 블로깅 해야겠다 ㅎㅎ
'프론트엔드 개발자가 될거야. > react' 카테고리의 다른 글
[MUI Table 커스텀하기] React, Styled-Componet, Material-UI, TypeScript에서 테이블 커스텀하기 (0) 2023.02.04 [react-query] react-query는 왜 써야할까? (0) 2023.01.24 [axios] fetch 대신 axios 사용하기, 내가 경험한 트러블슈팅 (0) 2023.01.15 [2023년 목표] 리액트 마스터🔥 (0) 2023.01.02 [1인 헤어샵 예약 시스템 구현기] firebase로 실시간 예약 시스템 구현하기 (0) 2022.10.28