Array.prototype.splice()
array.splice(*start*[, *deleteCount*[, *item1*[, *item2*[, *...*]]]])- 위 처럼 사용
- deleteCount를 입력하지 않거나 전체 배열의 길이보다 더 크면 배열 안의 모든 데이터 삭제
1
2
3
4
5
6
7
8
9
10
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]
RTK Query 자동 리패칭
들어가기
- RTK Query를 사용하면서 새로운 데이터를 추가 했을 때 캐시되어 있는 테이블의 데이터를 업데이트 시키고 싶었다.
- 이런 기능을 RTK Query에서 아주 간단하게 사용할 수 있도록 제공하고 있었다.
방법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post } from './types'
const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl: '/',
}),
tagTypes: ['Post', 'User'],
endpoints: (build) => ({
getPosts: build.query<Post[], void>({
query: () => '/posts',
providesTags: ['Post'],
}),
addPost: build.mutation<Post, Omit<Post, 'id'>>({
query: (body) => ({
url: 'post',
method: 'POST',
body,
}),
invalidatesTags: ['Post'],
}),
}),
})
- 위 코드를 보면
createApi부분에서tagType이라는 메서드로 태그를 관리할 수있다. - Query에는
providesTags를 추가해서 해당 태그에 연결 시킨다. (구독!) Mutation에는
invalidatesTags에 해당 태그를 연결 시킨다. (역시 구독!)- Query는 데이터를 읽어올 때 (api의 get에 주로 사용)
Mutation은 데이터를 업데이트, 추가할 때 (api의 post나 fetch에 주로 사용) 사용한다.
- 이렇게 연결했을 때 Mutation이 성공하면
- 자동으로 Query는 다시 리패칭을 실행하여 새로운 값을 받아온다.
- 기존에 받았던 값을 캐시하여 API 요청 부담을 줄여주고,
- 필요할 때 API에 요청하여 새로운 값을 받아올 수 있는 것이다.