Angular - 동작원리 및 RxJS와 Ngrx

앵귤러 개발자로써 까먹은 기본적인 개념들을 한번 정리하는 시간을 가져 보겠다.

 

앵귤러의 동작원리란?

1. 앵귤러 부트스트랩: 브라우저가 HTML(index.html) 파일을 로드하고 앵귤러 애플리케이션이 부트스트랩됩니다.
2. 루트 모듈 초기화: main.ts 파일에서 platformBrowserDynamic().bootstrapModule(AppModule)이 호출되어 루트 모듈(AppModule)이 부트스트랩됩니다. AppModule이 부트스트랩되면 Angular는 루트 컴포넌트(AppComponent)를 로드하고, 이를 기반으로 애플리케이션의 나머지 컴포넌트들을 초기화합니다.
3. 의존성 주입: 필요한 서비스들이 컴포넌트에 주입됩니다.
4. 라우팅 처리: URL에 맞는 컴포넌트가 선택되고 로드됩니다.
5. 템플릿 렌더링: 컴포넌트의 템플릿이 데이터 바인딩을 통해 렌더링됩니다. (html)
6. DOM 업데이트: 변경 감지를 통해 DOM이 업데이트되고, 최종적으로 화면에 출력됩니다.
7. 비동기 작업 처리: 필요한 경우 비동기 데이터 로딩 후 UI가 다시 업데이트됩니다.

위와 같은 프로세스로 앵귤러는 페이지를 랜더링 한다.

* 부트스트랩은 소프트웨어 개발에서 시스템이나 애플리케이션을 초기화하거나 시작하는 과정을 의미

* 의존성 주입은 컴포넌트에 필요한 서비스를 자동으로 제공해주는 앵귤러의 중요한 기능

ex) @Injectable({ providedIn: 'root' }) 서비스 클래스를 정의할 때 사용하는 데코레이터

이 설정을 사용하면 Angular 애플리케이션 내에서 동일한 서비스 인스턴스가 재사용되며, 별도의 모듈에서 서비스 제공자를 명시할 필요가 없어 코드가 간결해진다.

 

Angular의 주요 생명주기 훅 (Lifecycle Hooks)

 

• ngOnChanges(changes: SimpleChanges)
  • 컴포넌트의 입력 속성들이 바뀔 때마다 호출됩니다. 이 훅은 컴포넌트가 생성된 직후와 입력 속성이 변경될 때마다 실행됩니다.
  • 언제?: 입력 속성의 값이 바뀔 때마다.
  • 용도: 입력 속성의 변경을 감지하여 그에 따라 처리 작업을 수행할 때 사용.
• ngOnInit()
  • 컴포넌트가 초기화될 때 한 번 호출됩니다. 입력 속성이 모두 설정된 후에 호출되므로, 초기화 작업을 수행하기에 적합한 장소입니다.
  • 언제?: 컴포넌트가 처음 초기화될 때.
  • 용도: 초기 데이터를 설정하거나, 외부 서비스로부터 데이터를 가져오는 등의 초기화 작업에 사용.
• ngDoCheck()
  • Angular의 기본 변경 감지 알고리즘 외에 추가로 수행할 체크 로직이 있을 때 호출됩니다.
  • 언제?: Angular의 변경 감지 주기 동안 반복적으로 호출됩니다.
  • 용도: 변경 감지 주기마다 사용자 정의 검사를 수행하고 싶을 때 사용.
• ngAfterContentInit()
  • 컴포넌트의 콘텐츠(ng-content)가 초기화된 후에 한 번 호출됩니다.
  • 언제?: 컴포넌트의 콘텐츠가 초기화된 직후.
  • 용도: 콘텐츠가 렌더링된 후 초기화 작업을 수행할 때 사용.
• ngAfterContentChecked()
  • 콘텐츠가 초기화되거나 변경될 때마다 호출됩니다.
  • 언제?: 콘텐츠가 변경된 직후.
  • 용도: 콘텐츠의 변경 사항에 반응하여 작업을 수행할 때 사용.
• ngAfterViewInit()
  • 컴포넌트의 뷰와 하위 뷰들이 모두 초기화된 후에 한 번 호출됩니다.
  • 언제?: 컴포넌트의 뷰가 초기화된 직후.
  • 용도: 뷰가 초기화된 후 DOM 조작을 해야 할 때 사용.
• ngAfterViewChecked()
  • 뷰가 초기화되거나 변경될 때마다 호출됩니다.
  • 언제?: 뷰가 변경된 직후.
  • 용도: 뷰의 변경 사항에 따라 추가 작업을 수행할 때 사용.
• ngOnDestroy()
  • 컴포넌트가 파괴되기 직전에 호출됩니다. 이 단계에서 컴포넌트가 사용하는 리소스를 정리할 수 있습니다.
  • 언제?: 컴포넌트가 파괴되기 직전.
  • 용도: 구독 해제, 타이머 정리 등 메모리 누수를 방지하기 위한 정리 작업에 사용.

 

 

implements 로 추가하는서비스와 extends 로 추가하는게 무슨차이일까?

 

implements와 extends는 각각 인터페이스와 클래스 상속과 관련된 키워드

 

implements

• 인터페이스를 구현하기 위해 사용됩니다.
• 인터페이스는 메서드의 청사진을 제공하며, 클래스는 그 메서드들을 구현해야 합니다.
• 인터페이스 자체에는 구현 코드가 없고, 다중 인터페이스를 구현할 수 있습니다.
• ngonit/ hook

extends

• 클래스 상속을 위해 사용됩니다.
• 부모 클래스의 모든 속성과 메서드를 자식 클래스가 물려받습니다.
• 상속은 기존 코드를 재사용하고, 이를 확장하거나 재정의하는 데 사용됩니다.

 

rxjs란?

RxJS는 비동기 프로그래밍을 다루기 위한 라이브러리이다. 데이터를 스트림 형태로 다루며, Observable이라는 객체를 통해 데이터의 흐름을 관리한다. Observable은 시간에 따라 발생하는 데이터를 표현하며, 이를 구독(subscribe)해서 변화를 감지할 수 있다. 또한, map, filter, mergeMap 등의 연산자를 통해 데이터를 쉽게 변형하고 처리할 수 있다. 주로 이벤트 처리나 비동기 API 호출에 많이 사용된다

• mergeMap: 모든 내부 옵저버블을 병렬로 처리. 각 내부 옵저버블의 결과가 순서에 상관없이 출력다.
• switchMap: 새로운 옵저버블이 구독되면 이전 옵저버블의 구독을 취소하고, 새로운 옵저버블만 구독다. 이를 통해 최신 데이터만을 유지할 수 있다.
• concatMap: 내부 옵저버블을 순서대로 처리하며, 각 옵저버블이 완료될 때까지 다음 옵저버블을 시작하지 않는다. 순서를 보장하면서도 병렬 처리를 하지 않는 것이 특징.

기본 개념은 하단 참조 가능

2023.03.29 - [Angular] - Angular - RxJS 란?

Angular - RxJS 란?

 

 

 

NgRx의 전체 흐름은? (Angualr + rxjs)

• Action: 사용자가 상태 변경을 요청할 때 발생하는 명령. 예를 들어, 카운터를 증가시키는 액션을 디스패치(dispatch)한다.
• Reducer: 액션을 수신하여 상태를 변경하는 순수 함수. Reducer는 현재 상태와 액션을 받아서 새로운 상태를 반환한다.
• Store: 중앙 저장소로, 애플리케이션의 모든 상태를 관리. 컴포넌트는 Store에서 상태를 구독(subscribe)하고 변경 사항을 반영한다.
• Selector: Store에서 특정 부분의 상태를 선택하여 컴포넌트에 전달하는 도구.
• Effect (선택 사항): 비동기 작업이나 외부 서비스 호출 등 액션 외부 작업을 처리할 때 사용.

기본 개념은 하단 참조 가능
2023.03.08 - [Angular] - Angular - NgRx란?

Angular - NgRx란?

 

 

RxJS와 Ngrx를 프로젝트에 도입할 때의 장점은?

RxJS(Reactive Extensions Library for JavaScript)와 Ngrx(Reactive State for Angular)는 Angular 애플리케이션에서 복잡한 상태 관리와 비동기 작업을 처리하는 데 매우 효과적이다. RxJS는 옵저버블(Observable)을 통해 비동기 데이터 스트림을 처리하는 강력한 도구를 제공하여, API 호출, 이벤트 스트림, 사용자 입력 등 다양한 비동기 소스들을 일관된 방식으로 관리할 수 있다.

 

Ngrx는 Redux 패턴을 기반으로 하는 상태 관리 라이브러리로, 애플리케이션의 전체 상태를 하나의 스토어(Store)에서 중앙집중식으로 관리하게 해다. 이를 통해 상태 변경을 예측 가능하고 일관되게 만들며, 특히 큰 애플리케이션에서 상태 관리를 단순화하고 성능을 향상시킨다.