대규모 배열에서 `push`와 `concat` 사용의 성능 영향은 여러 요인에 따라 달라집니다.
성능 벤치마크
1. 연결:
- 느림: 새 어레이를 생성합니다. 이로 인해 특히 대규모 어레이의 경우 상당한 메모리 사용량과 성능 저하가 발생할 수 있습니다.
- 예: 각각 크기가 10,000인 두 배열을 연결하는 경우 `concat`은 0.40 ops/sec로 수행되는 반면 `push`는 378 ops/sec로 수행됩니다[1].
2. 푸시:
- 빠름: 원본 배열을 내부에서 수정합니다. 이는 일반적으로 더 빠르고 메모리 효율성이 높습니다.
- 예: 한 배열에서 다른 배열로 요소를 푸시하는 'push'는 'concat'[1]보다 훨씬 빠르게 수행됩니다.
불변성 및 상태 관리
1. 불변성:
- Concat: React 및 기타 애플리케이션의 상태 관리에 필수적인 새 배열을 생성하여 불변성을 보장합니다.
- 푸시: 원래 배열을 변경하여 예상치 못한 동작과 버그가 발생할 수 있습니다.
2. 상태 관리:
- 반응: 불변성을 사용하여 상태 변경이 적절하게 감지되고 다시 렌더링되도록 합니다. `concat`은 불변성을 보장하므로 React의 상태 업데이트에 적합합니다.
모범 사례
1. 상태 업데이트를 위해 `concat`을 사용하세요:
- React에서 상태를 업데이트할 때 'concat'을 사용하여 불변성을 보장하고 예상치 못한 동작을 방지하세요.
2. 성능을 위해서는 `push`를 사용하세요:
- 성능이 중요한 애플리케이션의 경우 `push`를 사용하여 원래 배열을 그 자리에서 수정합니다.
3. 상태 변경 방지:
- 'push' 또는 'splice'와 같은 방법을 사용하여 상태를 직접 변경하지 마세요. 대신 업데이트된 값으로 새 상태 개체를 만듭니다.
가장자리 케이스
1. 대형 어레이의 연결 및 푸시:
- Concat: 대상 배열에 배열 크기를 조정할 필요 없이 새 요소를 수용할 수 있는 충분한 공간이 있으면 더 빠를 수 있습니다.
- 푸시: 새 요소를 수용하기 위해 대상 배열의 크기를 조정해야 하는 경우 속도가 느려질 수 있습니다.
2. `적용`이 포함된 엣지 케이스:
- `적용`으로 연결: 새 배열을 만들고 요소를 복사하는 추가 오버헤드로 인해 속도가 느려질 수 있습니다.
- `적용`으로 푸시: 대상 배열이 크고 새 요소가 끝에 추가되면 더 빨라질 수 있습니다.
결론
요약하자면, 대규모 배열의 경우 'push'는 일반적으로 더 빠르고 메모리 효율성이 높은 반면, 'concat'은 불변성을 보장합니다. 두 가지 방법 중 하나를 선택하는 것은 성능, 상태 관리, 불변성을 포함한 애플리케이션의 특정 요구 사항에 따라 달라집니다.
인용:[1] https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki
[2] https://stackoverflow.com/questions/25339803/javascript-concat-vs-push-benchmark
[3] https://dev.to/uilicious/javascript-array-push-is-945x-faster-than-array-concat-1oki/comments
[4] https://news.ycombinator.com/item?id=19991339
[5] https://www.codementor.io/blog/react-optimization-5wiwjnf9hj