api 통신 (2) 썸네일형 리스트형 [TanStack Query / React Query] useInfiniteQuery와 무한 스크롤 useInfiniteQuery는 페이지네이션이나 무한 스크롤과 같은 데이터 로딩을 구현할 때 사용됩니다. 1. useQuery 와 useInfiniteQuery의 차이 ● useQuery단일 데이터 객체 반환 한 번의 요청에 대한 응답만 저장 ● useInfiniteQuerypages 배열: 모든 페이지의 데이터를 순서대로 저장 pageParams 배열: 각 페이지를 가져올 때 사용된 매개변수 저장 여러 페이지의 데이터를 누적하여 저장 좀 더 이해하기 쉽게 data에 로그를 찍어보면 useQuery 와 uesInfiniteQuery 의 반환되는 data 의 구조는 다음과 같은 차이가 있습니다 1-1. useQuery const { data } = useQuery({ queryKey: ['i.. [React] Redux에서 비동기 작업 처리하는 3가지 방법 Redux 의 Reducers 함수는 다음과 같은 조건이 있습니다.순수함수여야 하며, 사이트 이펙트에 영향을 받지 않아야 하고, 동기적인 코드여야만 한다는조건이 바로 그것입니다. 이는 react 의 useReducer 함수도 같은 조건입니다.그럼 Redux 사용시, 이런 비동기 코드는 어디에서 작성해야하는 걸까요? 3가지 방법이 있습니다. 1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의2. 사용자 정의 action 을 사용( 커스텀 액션 생성자 (Thunk) )3. createAsyncThunk 사용( redux toolkit 만 가능) 1. 비동기 코드 예시 1-1. 컴포넌트 내에 useEffect() 함수를 사용하여 직접 정의const Component = () => { c.. 이전 1 다음
