[javascript] Angular와 자바스크립트에서의 데이터 정렬 방법 비교

21 Dec 2023

데이터 정렬은 웹 애플리케이션에서 매우 일반적인 요구사항입니다. Angular와 순수 자바스크립트로 데이터를 정렬하는 두 가지 방법을 비교해보겠습니다.

Angular에서의 데이터 정렬

Angular에서 데이터를 템플릿에 표시할 때, *ngFor 디렉티브를 사용하여 배열을 루프하고 데이터를 표시합니다. 이 때, *ngFor 디렉티브에는 쉽게 배열을 정렬할 수 있는 기능이 내장되어 있습니다.

// Component file
items = [3, 1, 2];

<!-- Template file -->
<div *ngFor="let item of items | orderBy: 'asc'">{{item}}</div>

위의 예제에서 orderBy 파이프를 사용하여 배열을 오름차순으로 정렬했습니다.

자바스크립트에서 배열을 정렬하는 가장 간단한 방법은 Array의 내장 메서드인 sort를 사용하는 것입니다.

const items = [3, 1, 2];
items.sort((a, b) => a - b);
console.log(items); // [1, 2, 3]

sort 메서드를 사용하여 숫자 배열을 오름차순으로 정렬했습니다.

Angular에서는 *ngFor 디렉티브와 파이프를 사용하여 템플릿에서 데이터를 손쉽게 정렬할 수 있습니다. 반면에 순수 자바스크립트에서는 내장된 sort 메서드를 사용하여 배열을 정렬할 수 있습니다.

Angular를 사용하면서 복잡한 데이터 정렬을 다뤄야 할 때, *ngFor와 파이프를 사용하는 것이 훨씬 효율적일 수 있습니다. 하지만 간단한 정렬 작업을 수행한다면 순수 자바스크립트의 sort 메서드를 활용하는 것이 좋을 수도 있습니다.

이러한 각 방법은 프로젝트의 요구사항과 개발자의 선호도에 따라 선택되어야 합니다.

Angular 공식 문서: https://angular.io/guide/pipes
MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort