배열할 사용자 정의 고리를 만들어 봤어요.

개시하다

이번에는 매번 배열 작업이 번거롭고 state로 배열을 처리하는 것 같아서 실시해 봤습니다.
이것은 학습용 노트다.

컨디션

"typescript": "^4.1.3",
"react": "^17.0.1",
"lodash": "^4.17.21"

결과 달성

배열 깊이 복사

깊이를 고려하여lodash를 채택

import _ from 'lodash'
type deepCopyType = { <T>(array: T[]): T[] }

export const deepCopy: deepCopyType = <T>(array: T[]) => {
  const newArray = _.cloneDeep(array)
  return newArray
}

정렬 작업

import { useState } from "react";
import { deepCopy } from "../../../../utils/deepCopy";

export const useArrayOperation = <T>( data: T[]) => {
  const [array, setArray] = useState(data)

  // 要素追加
  const arrayAdd = (data: T) => {
    setArray([...array, data]);
  }
  // 要素削除
  const arrayRemove = (index: number) => {
    const result = deepCopy(array);
    result.splice(index, 1);
    setArray(result)
  }
  // 要素更新
  const arrayUpdate = (index: number, data: T) => {
    const result = deepCopy(array);
    result.splice(index, 1, data);
    setArray(result)
  }

  return [
  　array, 
  　setArray, 
   { arrayAdd, arrayRemove, arrayUpdate }] as const
}

1. 실크 내용 배열을 깊이 있게 복제하는 함수 만들기

갑자기 수조 작업에 들어가기 전에 수조 작업을 할 때 깊이 복제를 하지 않으면 변경된 원본의 수조 대상에 영향을 미치기 때문에 깊이 복제에 사용할 함수를 준비했다.
사용자 정의 갈고리 함수 측면에서 실현할 수 있지만, 이번 구상은 다른 파일에서도 사용할 수 있으며, 파일을 분리할 수 있다.
이번에는lodash를 채택했습니다.

lodash install

$ npm i --save lodash
$ npm i --save-dev @types/lodash

lodash clone Deep에서

설치가 완료되면 실크입니다.
lodash의 cloneDeep 함수를 사용하여 깊이 있게 복사할 수 있습니다
참조: https://lodash.com/docs/4.17.15#cloneDeep

import _ from 'lodash'
export const deepCopy = <T>(array: T[]): T[] => {
  const deepCopyArray = _.cloneDeep(array)
  return deepCopyArray
}

설치 내용 2. 사용자 정의 연결 준비

깊이 복사 함수 만들기
그리고

진열의state 제작

정렬 작업(추가, 업데이트, 삭제)
의 사용자 정의 자동사냥 함수입니다.

배열state 만들기

useState에서 매개 변수를 받는 그룹 대상을state에 등록합니다.
함수는 데이터의 유형을 T열네릭스로 정의하여 함수 내에서 각종 유형의 그룹을 처리할 수 있다.

import { useState } from "react";

export const useArrayOperation = <T>( data: T[]) => {
  // type 
  // array: T[]
  const [array, setArray] = useState(data)
}

배열 작업(추가, 업데이트, 삭제)

useState에서 생성한 배열을 조작하는 함수를 준비합니다

import { useState } from "react";

export const useArrayOperation = <T>( data: T[]) => {
  // type 
  // array: T[]
  const [array, setArray] = useState(data)
}

// 要素追加
const arrayAdd = (data: T) => {
}
// 要素削除
const arrayRemove = (index: number) => {
}
// 要素更新
const arrayUpdate = (index: number, data: T) => {
}

요소 추가

추가할 때 setState에 추가합니다. 기존 그룹의 대상에 대해 무엇을 하는 것이 아니기 때문입니다.

import { useState } from "react";

export const useArrayOperation = <T>( data: T[]) => {
  // type 
  // array: T[]
  const [array, setArray] = useState(data)
}

// 要素追加
const arrayAdd = (data: T) => {
　setArray([...array, data]);
}
// 〜〜　省略　〜〜

요소 삭제 및 업데이트

삭제, 업데이트 시 참고원에 반영되는 모드가 있습니다
반영을 원하지 않을 때가 있기 때문에 이번에는 deepCopy 함수를 준비하여 splice로 배열 작업을 진행합니다.

import { useState } from "react";
import { deepCopy } from "../../../../utils/deepCopy";

export const useArrayOperation = <T>( data: T[]) => {
  // type 
  // array: T[]
  const [array, setArray] = useState(data)
}

// 要素追加
const arrayAdd = (data: T) => {
  setArray([...array, data]);
}
// 要素削除
const arrayRemove = (index: number) => {
    const result = deepCopy(array);
    result.splice(index, 1);
    setArray(result)
}
// 要素更新
const arrayUpdate = (index: number, data: T) => {
    const result = deepCopy(array);
    result.splice(index, 1, data);
    setArray(result)
}

끝맺다

이상은 배열 조작이 가능한 사용자 정의 연결고리입니다.

참고 자료

Array.prototype.splice()
JavaScript로 깊이 있게 복사하려는 경우