react 무한스크롤 2

flatMap()

오늘은 무한스크롤을 구현하면서 새롭게 알게된 배열메서드인 flatMap 에 대해 공부한걸 적어보려고 한다.우선 flatMap 함수는 flat과 map을 합친 메서드이다.flat 메서드가 무엇인지 잘 모를수도 있기에 우선 flat에 대해 설명하겠다.flat() const a = [1,2,3] const b = [4,5,6] // a와 b는 배열을 가지고 있는 변수입니다. // 이 두 개를 합치기 위해서는 concat으로 합치는 방법도 있습니다. console.log(a.concat(b)) // [1,2,3,4,5,6] console.log([a,b].flat()) // [1,2,3,4,5,6]우선 concat과 비슷하게 배열을 합치는 메서드인데, 좀 더 사용하기에는 깔끔하고..

리액트 2024.12.21

tanstackquery [useInfiniteQuery]

프로젝트에 무한스크롤을 구현하기 위해 필요한 것을 찾다가 tanstack-query의 useInfiniteQuery 에 대해 공부해봤다.사용법은 평소 조회를 할 때 사용하는 useQuery와 사용법이 비슷하지만 다른 차이점도 존재하였다.우선 기존에 사용했던 useQuery와의 차이점을 비교해보면 아래와 같다.useQuery단일 쿼리를 수행하여 데이터 패칭특정 데이터를 가지고 온 뒤, 그 데이터를 캐싱하여 재사용(queryKey)목록조회, 유저정보 등 사용함useInfiniteQueryuseQuery에서 추가적으로 페이지네이션이나 무한스크롤을 지원특정 데이터를 여러 페이지에 걸쳐서 가져오고, 사용자가 더 많은 데이터 요청할 수 있도록 할 때 사용목록리스트, 스크롤 할때 추가 데이터 보여주기에 적합예제ret..

리액트 2024.12.19