useQuery
-
[react-query] react-query는 왜 써야할까?프론트엔드 개발자가 될거야./react 2023. 1. 24. 18:37
react-query란? 왜 써야할까? react-query의 아주 큰 장점 중 하나는 "캐싱"이다. 그렇다면 캐싱은 뭘까? 캐싱이란? 캐싱이란 저장한다는 뜻이다. 컴퓨팅에서 캐싱이란 오랜시간이 걸리는 작업의 결과를 저장해서 시간과 비용을 필요로 회피하는 기법을 의미한다. 캐싱은 고성능 에플리케이션을 만드는데 가장 중요한 요소 중의 하나다. - 캐싱의 대표적인 사례 웹브라우저는 한번 다운로드 한 이미지 파일은 임시저장 디렉토리에 저장했다가 다음 요청이 있을 때 다운로드 하지 않고 다운받아 둔 이미지를 사용한다. * 참고 생활코딩 https://www.opentutorials.org/course/697/3839 이처럼 react-query는 캐싱을 해준다. 데이터를 저장해주기 때문에 유저들이 "로딩중.....
-
[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, }, bridg..