Immutable.제이스와 임머, 잘 분리해서 사용하셨나요?

최근의 전단 개발에서는 데이터를 이동 가능한 대상으로 처리하는 것이 주류다.데이터가 변할 때 다시 쓰는 것이 아니라 새 데이터로 새 대상을 만듭니다.최근 대상자가 데이터로 프로그램 곳곳에서 교환되는 경우가 늘면서 한 번에 다른 곳으로 교부된 데이터의 내용이 뒤에서 변경되면서 혼란스러운 디자인이 어려워진 것이 주된 이유다.
매번 데이터를 변경할 때마다 새로운 대상을 만들어야 한다. 특히 데이터가 복잡하거나 끼워 넣으면 번거롭고 프로그램의 전망도 나빠진다.그곳에서는 데이터를 정음판으로 처리하는 프로그램 라이브러리Immutable.js와 Immer를 사용한다.
어느 프로그램 라이브러리든 데이터를 이세계의 데이터로 처리하는 목적을 실현할 수 있지만 현재 임머의 개발은 더욱 활발하고 독립된 데이터 구조가 아니라 자바스크립트의 대상을 직접 처리할 수 있기 때문에 임머가 더욱 인기가 있다.
그러나 실제로 둘은 본래 서로 다른 특성을 가진 라이브러리이기 때문에 적당한 구분을 해서 사용해야 한다.일반적인 용례로 임머를 사용하는 것은 문제없지만 특수한 상황에서는 임머블을 사용한다.그렇게 지도 모른다, 아마, 아마...기존 일본어 문장TypeScript의 표현력으로 자유로운 JavaScript와 맞서다~Immutable.js편~에는 이런 순간이 있다(필자라고 강조).이 보도는 이것에 대해 좀 더 깊은 해설을 진행할 것이다.
immer는 Immutable입니다.js와 달리 자바스크립트가 제공하는 일반적인 데이터 구조는freeze이며,proxy 패키지로 제공됩니다.따라서 이론적으로는'대형 소장품을 반복적으로 변경하는 장면'에 불리할 수 있지만, 실제 적용에는 문제가 없을 것으로 보인다.
한마디로 다시 정리하면js는 영구 데이터 구조 프로그램 라이브러리를 제공하지만, 임머는 그렇지 않습니다.지속적인 데이터 구조의 혜택이 필요한 경우 Immutable입니다.js 선택하세요.단순히 자바스크립트의 대상을 이세계로 변경하고 싶을 뿐이라면 임머를 사용하는 것은 문제없다.

Immutable.js와 Immer의 차이를 아는 예

먼저, Immutable.js와 Immer가 어떤 다른 예를 가지고 있는지 봅시다.이것은 상당히 Immutable이다.js에 유리한 예입니다. 하지만, Immutable.js의 특성을 충분히 이해하세요.다음 예에서는 Immutable입니다.이것은 js와 Immer 두 가지 중에서 실현된 예이다.어느 것이든 N라면 N === 5라는 데이터를 생성할 수 있다(Immutable.js는 실제로는 자바스크립트의 배열이 아니다[[8],[8,1],[8,1,1],[8,1,1,4],[8,1,1,4,18]].이 배열들은 매번 새로 만드는 것이 아니라, '이전 그룹에 값 추가' 를 반복해서 생성합니다.

function runImmutable(N: number) {
  const result: List<number>[] = [];
  let list = List<number>();
  for (let i = 0; i < N; i++) {
    list = list.push(rand());
    result.push(list);
  }
  return result;
}

function runImmer(N: number) {
  const result: number[][] = [];
  let list: number[] = [];
  for (let i = 0; i < N; i++) {
    list = produce(list, (draft) => void draft.push(rand()));
    result.push(list);
  }
  return result;
}

function rand() {
  return Math.floor(Math.random() * 2 ** 5);
}

필자의 PC에서 위의 코드를 사용하여 Immutable을 진행한다.js와 Immer의 속도를 비교한 결과 이렇게 되었다(자신이 해보고 싶은 사람은 이거 코드샌드박스.부터).
N
Immutable.js
Immer
1000
2.6 ms
47.6 ms
2000
8.6 ms
152.5 ms
3000
10.6 ms
331.4 ms
4000
4.0 ms
584.1 ms
5000
1.9 ms
914.2 ms
이렇게 하면 이 임무에서 Immutable입니다.js의 속도가 압도적으로 빠르다.특히 실제로는 Immutable입니다.js의 시간 계산량은 O(N)이고 Immer는 O(N^2)이다.이런 차이는 임머List가 1부터 배열될 때마다 임머블이 나타나기 때문이다.js가 여러 리스트의 내부 구조에서 대상을 공유했기 때문이다.
Immer는 매번 새 배열 대상produce을 만들고 데이터를 원시 배열 대상에서 새 배열 대상으로 복사합니다.따라서 배열 대상을 만드는 데 $O(N)달러가 필요합니다.그걸 N번 반복해서 했으니까 $O(N^2) 달러야.한편, Immutable.문서에서push는 $O(1)달러[1]라고 명확하게 밝혔다.그래서 N번을 반복하면 그게 O(N)이다.또한 O(1)에서 길이 N의 배열을 새로 만들 수 없기 때문에 새로운 리스트는 이전의 리스트와 내부에서 데이터를 공유할 수밖에 없다.
이런 계산량과 메모리 사용량의 장점은 지속적인 데이터 구조를 이용하는 주요 목적 중의 하나이다.Immutable.js는 이러한 기능을 제공하는 것을 주요 목적으로 하는 프로그램 라이브러리로 Immer의 목적과 다르다.
또한 배열 생성 작업에서 Immutable이 수행됩니다.js의 속도가 압도적으로 빠르지만 실제로 이런 배열을 사용할 때의 공연은 다를 수 있습니다.즉, Immutable.jsproduce에 대한 무작위 접근은 O(1)가 아니라 O(\logN)입니다.지속적인 데이터 구조를 사용할 때는 생성뿐만 아니라 데이터를 사용할 때도 주의해야 한다.특히 데이터의 쓰기와 읽기는 균형이 잡히기 쉽다.전체를 고려하여 최상의 데이터 구조를 결정해야 한다.

프런트엔드 및 객체 재사용

위에서 설명한 대로 Immutable입니다.js와 Immer는 서로 다른 목적의 의식으로 구성된 도서관이다.그럼에도 불구하고 둘은 비교되기 쉽다. 왜냐하면 둘 다 공통된 이용 방법이 있기 때문이다. 즉, 이블라토의 대상으로 상태를 표현하기 때문이다.이 목적은 Immer에 적용되는 것이다. 특히List는 독특한 데이터 구조가 아니라 원시 대상으로 데이터를 처리할 수 있다는 점이 좋다.
Immutable.js의 개발이 정체된 것은 전방에 지속적인 데이터 구조의 수요가 부족하기 때문이다.이러한 데이터 구조 자체는 매우 중요한 개념으로 많은 프로그래밍 언어에 존재한다.우리 엔지니어들이 의존하는 브라우저 내부도 효과적인 데이터 처리에 자주 사용되어야 한다.그러나 전방 엔지니어가 요구하는 것은 처리 속도가 아니라 디자인의 개선이다.그렇기 때문에, Immutable.제이스를 대신해 임머는 더 번영했지.
실제로 예를 들면 Immutable입니다.js와 Immer를 사용하지 않으면 대상 속성을 업데이트하려면 다음과 같이 할 수 있습니다.

const newObj = {
  ...obj,
  foo: "bar",
};

List의 치수(속성의 수량)를 N으로 설정하면 이 계산량은 O(N)(처리 시스템이 매우 노력하여 최적화되지 않은 경우)이다.하나의 속성만 추가하는 것처럼 보이지만, 실제로는 전체 대상을 복제하는 계산량과 맞먹는다.그러나 많은 경우에 이 계산량에 문제가 없기 때문에 우리는 이런 처리를 쓸 것이다.
이런 처리를 할 때 재활용obj에 관심이 없다고 할 수 있다는 얘기다.obj처럼 끼워 넣은 대상은 복제되지 않고 재이용되지만 최대 이 정도obj.sub = { ... }안의 데이터는 재사용이 아니라 복제된다.
할 일에 관심이 없으시면 임머블에게 알려주세요.js가 필요 없고 처리하기 편한 Immer면 충분합니다.이 정도까지 할 필요가 있다면 임머가 아니라 임머블이다.js를 사용하십시오.

총결산

이 보도는 임무블이다.js와 Immer의 차이에 착안하여 해설을 진행하였다.이 프로그램 라이브러리들은 같은 목적으로 사용되지만 실제로는 매우 다른 목적으로 만들어졌다.기본적으로 임머를 쓰면 되지만 임머블일 수도 있어요.제이스가 필요한 장면이 있을 수도 있어요.이 기사를 읽고 그런 장면을 위해 준비하세요.
각주
나는 전선을 쫓지 않았기 때문에 모르겠다. 아마도 감가상각 계산량일 것이다.↩︎