React immutability-helper

사용하는 이유

배열을 수정 할 땐 원시적인 방법으론 위와 같이 배열 전체를 복사하고 처리 후 기존 값에 덮어씌우는 과정을 거쳐야 한다.
허나, 만약에 배열의 크기가 클 땐 성능이 좀 저하 될 수 있다.

다른 방법으로는 Immutability Helpers 를 사용하는 방법이 있다.
이는 배열을 더 효율적으로 수정 할 수 있게 해주는 페이스북의 Immutable-js 를 사용한다.

이를 사용하려면 라이브러리를 사전 설치해주어야 한다.

출처 및 추가 참고사항

state값 안의 배열 혹은 오브젝트를 쉽게 수정하기 위해 사용 된다

npm i immutability-helper

$ npm install --save react-addons-update

.js 상단에 import 하여 사용해준다.

import update from immutability-helper

기본적인 기능으로 아래와 같다

• {$push: array} push() all the items in array on the target.
• {$unshift: array} unshift() all the items in array on the target.
• {$splice: array of arrays} for each item in arrays call splice() on the target with the parameters provided by the item.
• {$set: any} replace the target entirely.
• {$merge: object} merge the keys of object with the target.
• {$apply: function} passes in the current value to the function and updates it with the new returned value.

출처

---

여러가지 사용법 예시

Splice

삽입과 삭제를 동시에 진행 할 수 있다.

setTabsInfo((prev) =>
     update(prev, {
       $splice: [
         [dragIndex, 1],
         [hoverIndex, 0, prev[dragIndex]],
        ],
      })
    );

---

Set

set으로 완전히 수정 할 수 있다.

   setContent((prev) =>
      update(prev, {
        tocList: {
          [tabKey]: { $set: [...nTocList] },
        },
      })
    );

---

Merge & Push

object는 merge를 array는 push를 통해서 새로운 값을 넣을 수 있다.

  setContent((prev) =>
      update(prev, {
        tabInfos: { $push: [addInitInfo] },
        tocList: { $merge: { [randomKey]: [] } },
      })
    );

---

splice로 값을 삭제하거나 추가할 수 있다.

자바스크립트에서 기본적으로 제공되는 splice(); 와 사용법이 똑같다.

  setContent((prev) =>
      update(prev, {
        tabInfos: { $splice: [[delTabInfos, 1]] },
      })
    );

---

Javascript Splice()함수

// 필수 매개변수와 선택적 매개변수가 포함된 splice() 문법

Array.splice(start, deleteCount, newItem, newItem, newItem, ...)

// 요일이 담긴 배열 생성하기 
let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2); // 인덱스 2부터 배열 변경

console.log(days); // ["Monday", "Tuesday"]

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 1); // 요소 하나만 삭제

console.log(days); // ["Monday"]
console.log(months); // ["January", "February", "Tuesday"]

---

다음 예시에서는 months 배열에 "March"와 "April"을 추가하면서 "Monday"와 "Tuesday"를 제거하는 방법을 보여줍니다

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 2, "March", "April"); // 요소 두 개를 제외하고, 다른 요소를 추가

console.log(days); // ["Monday", "Tuesday"]
console.log(months); // ["January", "February", "March", "April"]

---

다음 예시에서는 기존 요소를 삭제하지 않고 "February" 요소 옆에 새 요소 "March"를 추가하는 것을 보여줍니다. 앞서 언급한 것처럼 반환되는 값이 빈 배열이므로 이를 별도로 저장하지 않아도 됩니다.

let months = ["January", "February", "Monday", "Tuesday"];
months.splice(2, 0, "March"); // 두 번째 매개변수가 0이므로 기존 요소 모두 유지

console.log(months); 
// ["January", "February", "March", "Monday", "Tuesday"]

출처