![]()
react-query는 데이터 패칭과 상태 관리를 간편하게 처리할 수 있게 해주는 정말 좋은 라이브러리이다.이번 프로젝트에서도 react-query를 이용한 데이터 패칭을 하게되어서 열심히 사용해보고 있다. 현재 진행하는 프로젝트는 다른 분과 함께하다보니, 그 분이 특정 query-key를 통해서 데이터 패칭을 하고 있다면, 나는 그 쿼리를 무효화할 때 그 분이 어떤 query-key를 쓰고 계시는 지 열심히 찾아서 주워야하는 불편함이 있었다. like 헨젤과 그레텔... 이 뿐만 아니라 query-key를 변경해줘야 할 때도 그 쿼리 키를 사용하는 곳을 여기저기 돌아다니면서 query-key를 변경해줘야 하는 끔찍한 경험이 나를 기다리고 있었다.(쿼리 키만 바꿨을 뿐인데 늘어나는 파일 체인지...) 그..
![]()
이번에 (어느덧 한 달이 지난 시점이지만) 프로젝트 목록을 불러오는 로직을 작성하게 되었다.Next.js의 App router을 이용하기로 해서, react-query를 쓸지 안쓸지 팀원분들과 이야기를 나누어보았다.토론의 결과는 react-query를 사용하자는 것으로 귀결되어 무한스크롤 역시 react-query를 사용해서 구현했다. 구현 계획은 프로젝트 리스트의 가장 아랫부분에 div를 넣어두고, 이 요소가 보이는 순간 새로운 데이터를 패칭하는 것이다.그럼 바로 로직을 작성해보자. Intersection Observer 이용하기사용하려는 컴포넌트에서 intersectioin observer 설정을 해도 되지만, ProjectList.tsx는 데이터를 받아서 UI로 보여주는 UI컴포넌트이자, 여러 곳에..
