Angular에서 스프레드 연산자(Spread Operator) 활용 정리

Angular에서 스프레드 연산자(spread operator, ...)는 JavaScript/TypeScript의 기능으로, 배열이나 객체의 요소를 확장하거나 복사할 때 유용하게 사용됩니다. 티스토리 블로그에 게시하기 적합한 형식으로 스프레드 연산자의 개념과 Angular에서의 활용 사례를 간결하고 명확하게 정리해드리겠습니다.

---

Angular에서 스프레드 연산자(Spread Operator) 활용 정리

1. 스프레드 연산자란?

스프레드 연산자(...)는 JavaScript ES6에서 도입된 문법으로, 배열이나 객체의 요소를 개별적으로 확장하거나 복사할 때 사용됩니다. Angular 프로젝트에서는 TypeScript와 함께 사용되며, 데이터 관리와 컴포넌트 간 데이터 전달에서 자주 활용됩니다.

기본 문법

• 배열: [...array]
• 객체: {...object}

---

2. 주요 활용 사례

(1) 배열 복사 및 병합

스프레드 연산자를 사용하면 배열을 얕은 복사(shallow copy)하거나 여러 배열을 병합할 수 있습니다.

// 배열 복사
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray]; // [1, 2, 3]

// 배열 병합
const array1 = [1, 2];
const array2 = [3, 4];
const mergedArray = [...array1, ...array2]; // [1, 2, 3, 4]

 

Angular에서의 활용

• 컴포넌트에서 데이터 목록을 복사해 상태를 변경하지 않고 새로운 배열을 생성.
• 예: 리스트 필터링 시 원본 데이터를 유지한 채 새로운 리스트 생성.

 

// 컴포넌트에서
export class MyComponent {
  originalItems = ['Apple', 'Banana', 'Orange'];
  filteredItems = [...this.originalItems]; // 원본 유지하며 복사
}

(2) 객체 복사 및 병합

객체의 속성을 복사하거나 새로운 속성을 추가할 때 유용합니다.

 

// 객체 복사
const originalObj = { name: 'John', age: 30 };
const copiedObj = { ...originalObj }; // { name: 'John', age: 30 }

// 객체 병합 및 속성 추가
const additionalInfo = { city: 'Seoul' };
const mergedObj = { ...originalObj, ...additionalInfo }; // { name: 'John', age: 30, city: 'Seoul' }

 

Angular에서의 활용

• 컴포넌트 상태 관리 시, 기존 상태를 유지하며 새로운 속성을 추가.
• 예: 사용자 입력 데이터를 기존 데이터에 병합.

 

export class UserComponent {
  user = { name: 'John', age: 30 };
  
  updateUser(newData: any) {
    this.user = { ...this.user, ...newData }; // 기존 데이터 유지하며 업데이트
  }
}

(3) 함수 인자 전달

스프레드 연산자는 배열의 요소를 개별 인자로 전달할 때 사용됩니다.

 

const numbers = [1, 2, 3];
const sum = (a: number, b: number, c: number) => a + b + c;
console.log(sum(...numbers)); // 6

 

Angular에서의 활용

• 서비스나 유틸리티 함수 호출 시 배열 데이터를 인자로 전달.
• 예: API 호출 시 동적으로 매개변수 전달.

 

export class DataService {
  fetchData(...params: string[]) {
    // API 호출 로직
  }
}

export class MyComponent {
  params = ['id1', 'id2', 'id3'];
  constructor(private dataService: DataService) {
    this.dataService.fetchData(...this.params); // 배열을 개별 인자로 전달
  }
}

(4) 불변성 유지

Angular의 변경 감지(change detection)에서 불변성을 유지하는 것은 성능 최적화에 중요합니다. 스프레드 연산자는 새로운 객체/배열을 생성해 불변성을 보장합니다.

 

export class TodoComponent {
  todos = [{ id: 1, text: 'Learn Angular' }];
  
  addTodo(newTodo: any) {
    this.todos = [...this.todos, newTodo]; // 새로운 배열로 업데이트
  }
}

---

3. 장점

• 간결한 코드: 복잡한 루프나 메서드 없이 배열/객체를 쉽게 복사하거나 병합.
• 불변성 유지: Angular의 OnPush 변경 감지 전략과 잘 맞아 성능 최적화에 기여.
• 유연성: 배열, 객체, 함수 인자 등 다양한 상황에서 활용 가능.

---

4. 주의점

• 얕은 복사: 스프레드 연산자는 얕은 복사만 수행하므로, 중첩된 객체/배열은 참조가 유지됩니다.해결법: 깊은 복사가 필요하면 lodash의 cloneDeep이나 JSON 직렬화(JSON.parse(JSON.stringify(obj)))를 사용.

  const nestedObj = { user: { name: 'John' } };
  const copied = { ...nestedObj };
  copied.user.name = 'Jane'; // 원본도 변경됨
  console.log(nestedObj.user.name); // 'Jane'

• 성능 고려: 큰 데이터셋에서는 스프레드 연산자의 성능 영향을 고려해야 함.

---

5. Angular에서 추천하는 사용 패턴

• 상태 관리: NgRx나 컴포넌트 상태 관리에서 불변성을 유지하며 데이터 업데이트.
• 템플릿 데이터 처리: *ngFor로 렌더링하는 리스트를 복사해 원본 데이터 보호.
• 서비스 데이터 처리: API 응답 데이터를 가공할 때 원본 데이터를 유지하며 새로운 데이터 생성.

 

// 서비스 예시
export class DataService {
  private data = { items: [1, 2, 3] };
  
  getData() {
    return { ...this.data }; // 원본 데이터 보호
  }
}

---

6. 결론

스프레드 연산자는 Angular 개발에서 데이터 복사, 병합, 불변성 유지에 매우 유용한 도구입니다. 코드의 간결함과 Angular의 변경 감지 메커니즘과의 호환성 덕분에 생산성을 높이고 유지보수를 쉽게 만듭니다. 하지만 깊은 복사가 필요한 경우에는 추가적인 방법을 고려해야 합니다.