Array.prototype.splice()

• array.splice(*start*[, *deleteCount*[, *item1*[, *item2*[, *...*]]]])
• 위 처럼 사용
• deleteCount를 입력하지 않거나 전체 배열의 길이보다 더 크면 배열 안의 모든 데이터 삭제

copyconst 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에서 아주 간단하게 사용할 수 있도록 제공하고 있었다.

방법

copyimport { 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에 요청하여 새로운 값을 받아올 수 있는 것이다.

Reference

• mdn web docs, Array.prototype.splice(), 2020.12.09
• Redux Toolkit, Using RTK Query - Automated Re-ferching, 2022.06.24