[Angular] 04. 바인딩, 옵저버블, 파이프

교재 : [Angular Development with TypeScript]

링크 : https://www.kyobobook.co.kr/product/detailViewKor.laf?barcode=9791186710159

*Angular에 대해서 alpaco 사이트에서 학습하고 내용을 정리하였습니다.

Chapter04. 바인딩, 옵저버블, 파이프

학습목표 : 

1. 여러 가지 유형의 데이터 바인딩 사용 방법에 대해 설명할 수 있다.

→이벤트 바인딩은 이벤트에 함수를 연결하고, 이벤트가 발생하면 이 함수를 실행한다. 어트리뷰트 바인딩은 HTML 엘리먼트 어트리뷰트에 있는 텍스트 값을 갱신할 때 실행한다. 프로퍼티 바인딩은 DOM 객체 프로퍼티에 있는 값을 갱신할 때 사용한다.

2. 옵저버블 스트림의 처리와 옵저블 객체의 콜백 함수에 대해 설명할 수 있다.

→옵저버블 스트림이 처리하는 경우는 다음과 같다.

- 다음 엘리먼트를 전달한다.

- 에러를 전달한다.

- 스트리밍이 종료되었다는 신호를 전달한다.

옵저버 객체가 가질 수 있는 콜백 함수는 다음과 같다.

- 다음 엘리먼트를 받았을 때 처리하는 함수

- 에러를 받았을 때 처리하는 함수

- 데이터 스트림이 끝났을 때 실행하는 함수

학습내용  : 

이번 차시에서는 바인딩, 옵저버블, 파이프에 대해 학습합니다.

4차시 학습에서 중요한 키워드는 [데이터 바인딩], [옵저버블], [스트림]입니다.

각 키워드에 대한 설명은 다음과 같습니다.

[데이터 바인딩]

데이터 바인딩은 애플리케이션의 데이터를 화면과 연결하는 기능이다.

[옵저버블]

옵저버블은 소켓이나 배열, 화면에서 발생한 이벤트 등과 같은 데이터 소스를 한번에 하나씩, 연속으로 보내는(스트리밍, streaming) 객체다. 

[스트림]

스트림은 애플리케이션에 전달되는 데이터 컬렉션이다.

학습요약 : 

 

• 데이터 바인딩은 애플리케이션의 데이터를 화면과 연결하는 기능이며, 데이터 바인딩을 사용하면 개발자가 직접 코딩해야 하는 양을 많이 줄일 수 있다. 

• 여러 가지 유형의 데이터 바인딩 사용 방법

 이벤트 바인딩은 이벤트에 함수를 연결하고, 이벤트가 발생하면 이 함수를 실행한다. 

 어트리뷰트 바인딩은 HTML 엘리먼트 어트리뷰트에 있는 텍스트 값을 갱신할 때 실행한다.

 프로퍼티 바인딩은 DOM 객체 프로퍼티에 있는 값을 갱신할 때 사용한다.

 템플릿 바인딩은 뷰 템플릿을 조작할 때 사용한다.

 양방향 데이터 바인딩은 ngModel을 사용한다.

 양방향 데이터 바인딩은 뷰와 모델을 강하게 결합하는 방법이며, 뷰에 있는 값이 바뀌면 모델의 값이 바로 동기화되고, 반대로 모델의 값이 바뀌면 뷰에 있는 값이 바로 동기화된다. 

• 반응형 프로그래밍은 옵저버블 이벤트 스트림을 구독하고, 이 스트림에 반응하는 방식으로 동작하는 애플리케이션을 만드는 것을 의미한다. 프로그래밍 분야에서 옵저버/옵저버블은 이미 널리 알려진 패턴이며, 비동기 처리를 하는 경우에도 잘 어울린다. 

• 옵저버블 패턴의 특징은 데이터 처리에 밀어 넣는 방식을 택했다는 것이다. 반대로 받아오는 방식은 배열을 돌거나, Iterable 객체를 사용하거나, ES6 제너레이터 함수를 통해 구현한다. 전달된 데이터에 반응할 것인지, 데이터를 직접 받아올 것인지의 차이다. 

• 옵저버블은 연속된 데이터 스트림을 생성하는 객체이며, 옵저버는 이 스트림을 구독해서 사용하는 객체다. 

• 옵저버블은 콜드 옵저버블과 핫 옵저버블 두 가지가 있다. 

 콜드 옵저버블은 구독자가 있는 경우에만 스트리밍 데이터를 만들기 시작하고, 핫 옵저버블은 데이터를 받는 구독자가 없더라도 데이터를 스트리밍한다.

• 옵저버블은 소켓이나 배열, 화면에서 발생한 이벤트 등과 같은 데이터 소스를 한번에 하나씩, 연속으로 보내는(스트리밍, streaming) 객체다. 좀 더 자세히 보면, 옵저버블 스트림은 아래 세 가지 경우를 처리할 수 있다.

 다음 엘리먼트를 전달한다.

 에러를 전달한다.

 스트리밍이 종료되었다는 신호를 전달한다.

• 따라서, 옵저버 객체는 세 가지 콜백 함수를 가질 수 있다.

 다음 엘리먼트를 받았을 때 처리하는 함수

 에러를 받았을 때 처리하는 함수

 데이터 스트림이 끝났을 때 실행하는 함수

• JavaScript는 배열을 처리하는 함수를 다양하게 제공하는데, 자주 사용하는 함수는 다음과 같다.

 map(): 배열의 각 항목마다 함수를 실행한다. map() 함수를 사용하면 배열의 크기가 바뀌는 것에 신경 쓰지 않고 각 항목의 값이나 형태를 변경할 수 있다.

 filter(): 배열의 각 항목 중에 조건에 만족하지 않는 항목을 걸러낸다. 반환되는 배열의 길이는 원래 배열보다 짧거나 같다. 

 reduce(): 배열의 각 항목의 값을 종합하고 하나의 값을 반환한다. 배열의 값을 모두 더하거나 모두 곱하는 기능을 구현할 때 사용된다.

• 스트림은 애플리케이션에 전달되는 데이터 컬렉션이다. 

• 옵저버블 객체는 이터레이터를 좀 더 개선한 것이다. 이터레이터는 데이터를 직접 가져오는 방식이지만, 옵저버블은 구독자에게 전달된 데이터에 반응하는 방식이다. 

• 컴포넌트의 템플릿에서 디렉티브로 폼을 구성하는 방식이 있는데, 이 방식은 템플릿 기반 폼(template-driven forms)이라고 한다. 그리고 컴포넌트의 TypeScript 코드와 폼 객체를 연결하는 방식은 반응형 폼(reactive forms)이라고 한다. 

• 파이프(Pipes)는 어떤 값의 형태를 바꿀 때 사용하는 템플릿 엘리먼트다. 파이프는 | 기호를 사용하며, 파이프 기호 뒤에 원하는 형식의 파이프 이름을 명시하면 된다. 

template : ‘<p> Your birthday is {{ birthday | date }}</p>’

• Angular에서는 다양한 파이프를 제공하는데, 파이프는 각각 DatePipe와 같이 클래스로 구현되어 있다. 그리고 템플릿에서는 파이프의 이름(ex, date)을 지정하는 것만으로도 파이프를 쉽게 적용할 수 있다. 

• 자주 사용하는 파이프

 UpperCasePipe: 문자열을 모두 대문자로 변환하며, 템플릿에 | uppercase로 사용한다.

 DatePipe: 날짜를 여러 가지 형식으로 표시할 수 있으며, 템플릿에 | date로 사용한다.

 CurrencyPipe: 숫자를 원하는 형식의 화폐 단위로 변환하며, 템플릿에 | currency로 사용한다.

 JsonPipe: 문자열을 JSON 형식으로 변환하며, 템플릿에 | json으로 사용한다.

 AsyncPipe: 옵저버블 스트림을 엘리먼트로 풀어서 표시하며, 템플릿에 | async로 사용한다.

• 템플릿에서 사용할 파이프의 이름은 @Pipe 어노테이션에 정의하며, 파이프를 사용하는 컴포넌트나 상위 모듈에서 이 파이프를 선언해야 사용할 수 있다.

• 컴포넌트의 프로퍼티를 바인딩하면 프로퍼티 값이 DOM 객체를 거쳐 화면에 표시된다. 

• 양방향 바인딩은 [( )] 표기법이나 NgModel 디렉티브를 사용한다.