useQuery

새로운 프로젝트를 진행하며 한 컴포넌트에서 많은 이미지를 사용해야하는 기능 구현을 하게되었다. 각 1번, 2번, 3번, 4번 선택지마다 적게는 5개의 이미지 파일, 많게는 7개의 이미지 파일을 사용자에게 보여주어야 한다. 이미지는 이미지 서버에서 GET 요청으로 가져오는 방식으로 구현하려 한다. 이번 프로젝트에서는 MSW를 이용해 테스트 환경을 구축해서 개발한다. http.get("/champions/duelist", async () => { return HttpResponse.json( { "champions": [ { "id": 1, "imageUrl": "https://대충 이미지 서버 주소/valorant/duelist/ZETT.webp" }, { "id": 2, "imageUrl": "https..

1. React-Query 란? React-Query란 서버의 데이터를 가져오거나, 캐싱, 값 동기화 및 업데이트, 에러 처리 등 비동기 과정을 쉽게 할 수 있도록 도와주는 라이브러리이다. 1.1 사용 이유 기존 상태 관리 라이브러리(redux 등)는 클라이언트 상태 관리에는 용이하지만, 서버 상태를 관리하기는 어렵다. 클라이언트에서 사용하는 상태가 변할 수 있는 서버의 상태와 다를 수 있기 때문이다. 즉, API 요청과 비동기 데이터 관리를 좀더 쉽게 하기위해 등장한 것이다. React-Query는 서버의 상태를 불러오고, 불러온 상태를 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와준다. 또한 기존 상태 관리 라이브러리를 이용하면 서버의 데이터와 클라이언트 데이터를 store에 공존하게 될..

어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에 유저가 속한 프로젝트들의 정보를 가져와야 했다. DB에서 프로젝트들의 정보를 가져오기 까지 완료했다. 그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다. 가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자. 내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다. 데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다. 이 의견을 보니.... 흠.... 아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고, 다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다. 그래..