저번 포스팅에서는 React-query를 활용하여 custom hook을 만들어 사용하는 과정을 소개했다. 이번에 다뤄볼 내용은 React-query를 활용한 데이터 필터링이다. 아띠즈 프로젝트에서 해당 데이터 필터링 기능이 사용되는 컴포넌트가 몇개 있었지만, 그 중에서 검색된 작품들의 경매상태가 경매중인지 경매 완료인지 필터링하는 기능에서 React-query를 사용했던 부분에 대해 다뤄보려고 한다. React-query select 옵션 select 옵션을 사용하지 않고 데이터를 직접 가공하여 state로 관리하는 방법을 사용할 수 있겠지만, React-query에서 제공하는 select 옵션을 사용하면 클라이언트 단에서 필터링을 진행하지 않을 수 있다. select 옵션은 React-query를 통..
지난 포스팅에서도 이야기 했듯이 아띠즈 프로젝트를 진행하면서 사용된 API의 개수는 60개 이상이었기 때문에, 서버 데이터 관리가 필수적이었다. 많은 사용자들이 사용한다는 것을 가정하고, 데이터 캐싱 또한 필수적이었는데, React-query를 도입하면서 보다 간편하게 위에서 언급했던 사항들을 처리할 수 있었다. React-query에서 제공하는 useQuery, useMutation 등을 사용하는 것 또한 간편하지만, 여러 컴포넌트에서 데이터가 필요한 경우도 많았기에 재사용성을 고려하여 custom hook을 만들어 관리했다. 추가적으로 React-query에서 제공하는 제네릭을 사용하여 관리하는 데이터의 타입 또한 같이 다뤄보자. useQuery와 useMutation 훅에서 사용되는 제네릭 타입은 ..
이번에 새로 프로젝트를 하나 진행하면서 Axios의 모듈화가 프로젝트 전반에 큰 영향을 미친다는 것을 알게되었다. 프로젝트의 규모가 크기도 했고, 사용됐던 API의 개수가 60개 정도였기 때문에, Axios 사용에 있어서 모듈화는 필수였다. 비록 API의 개수가 적거나, 프로젝트의 규모가 작다고 해도, Axios의 모듈화는 앞으로 진행될 수도 있는 사이드 프로젝트나 개인 프로젝트에 있어서 필수적으로 도입해야겠다라고 생각했기 때문에, 다시 한 번 정리하면서, 이 글을 읽는 다른 개발자 분들에게도 도움이 됐으면 하는 바람이다. Axios란? Axios는 HTTP 비동기 통신을 위한 라이브러리이다. 쉽게 말해 프론트엔드와 백엔드 간의 원활한 통신을 위해 사용된다. 기존에 Axios를 사용했던 방법 Axios ..
