앵귤러 기초(Angular basic) 12.파이프(pipe)

테이터를 적합한 포맷으로 만들어 주는 파이프에 대해 알아보겠습니다.

 

이번 포스트에선 아래의 내용을 다루고 있습니다.

1. 파이프 종류
2. 파이프 사용법

---

파이프

Angular의 데이터 바인딩을 이용하면 데이터를 쉽게 표시할 수 있습니다.

하지만 DB를 통해 수신받은 데이터가 화면의 표시에 적합한 형식이 아닌 경우도 있습니다.

 

파이프는 데이터가 화면에 출력하는 적합한 포멧이 아닐 경우 유용합니다.

그리고 바인딩된 프로퍼티를 표시하기 전에 변환하므로 프로퍼티 값을 사용자에게 더 친숙하거나 더 적합한 로케일(국가나 지역 문화에 의해 다른 언어나 단위, 표기 등, 혹은 사용자 환경)로 변경할 수 있습니다.

 

파이프 종류

Angular에는 date, number, decimal, percent, currency, uppercase, lowercase 등과 같은 형식 지정 값을 위한 기본 제공 파이프를 제공하고 있습니다.

또한 객체의 내용을 JSON 문자열로 표시하는 json 파이프와 같은 객체 작업을 위한 몇 개의 파이프를 제공하므로 디버깅할 때 유용합니다.

물론 자체 커스텀 파이프를 만들 수도 있습니다.

 

파이프 사용법

파이프의 간단한 사용법 살펴 보겠습니다.

1. 보간(interpolation)에서 사용

템플릿 표현식에서 속성 뒤에 파이프 문자(|)를 추가한 다음 소문자로 변환하는 lowercase파이프 추가하였습니다.

2. 프로퍼티 바인딩 에서 사용

프로퍼티 바인딩에서도 파이프를 사용할 수 있습니다. 템플릿 표현식에서 프로퍼티 뒤에 파이프를 추가하고 원하는 파이프를 지정합니다.

3. 하나 이상의 파이프 사용

여기서 price의 값이 2.4라고 가정면 2.4가 통화의 표현으로 바뀌게 됩니다.

currency파이프에 'USD':'code'로지정하면 통화 앞에 통화의 3글자 약어가 대문자로 추가됩니다.

그리고 대문자를 소문자로 바꾸고 싶으면 연달아 lowercase파이프를 추가하여 다시 변환할 수 있습니다.

그 결과 출력되는 값은 "usd2"이 표시됩니다.

4. 매개변수를 갖는 파이프

예제3 에서도 알 수 있듯 currency와 같은 일부 파이프는 매개변수를 지원합니다.

예를 들어 currency에는 통화 코드, 통화 기호 정의 문자열, 자릿수 정보 세 가지의 매개변수가 있습니다.

'symbol'로 표기하면 USD가 $심벌로 표기됩니다.

자릿수 정보는 왼쪽부터 최소 정수 자릿수, 최소 소수 자릿수, 최대 소수 자릿수로 구성됩니다.

1.2-2를 해석해보면 소수점 왼쪽으로 1자리 이상, 소수점 오른쪽으로 2자리 이상, 소수점 오른쪽으로 2자리 이하를 의미합니다.

price 2.4라고 가정 시 결과 출력되는 값은 "$2.40"입니다.

---

우리의 예제인 영화 리스트 화면에서 파이프를 이용해 보겠습니다.

파이프 적용 전

 

위의 화면을 보면 감독, 개봉일, 주연, 평점의 데이터가 표시되고 있고, 이 데이터들은  컴포넌트에 정의된 대로 표시하고 있습니다.

지금은 컴포넌트에 정의된 데이터 지만 실제 프로젝트에선 DB에서 가져온 데이터라고 볼 수 있겠네요.

 

파이프를 사용하여 다음과 같이 바꿔보도록 하겠습니다.

템플릿 표현식의 속성 뒤에 파이프 문자를 추가한 다음 소문자 파이프를 지정할 수 있습니다.

1. uppercase파이프를 이용하여 대문자로 변환시켰습니다.
2. date파이프를 이용하여 MMM d, y형식으로 포맷을 바꿨습니다.
3. lowercase파이프를 이용하여 소문자로 변환시켰습니다.
4. number파이프를 이용하여 소수점 한자리 수까지 출력하도록 하였습니다.

브라우저에서 확인해 보겠습니다.

파이프 적용 후

파이프가 잘 작동합니다.

이렇듯 템플릿 표현식의 내장 파이프를 사용하여 간단한 데이터 변환을 쉽게 수행할 수 있습니다.

다른 내장 파이프를 알아보고 싶다면 구글에서 angular pipe를 검색해 angular 공식문서를 확인해 보세요.

---

여기까지 수고하셨습니다.

다음 포스트부터 다시 컴포넌트의 못다 한 이야기를 하면서 영화 목록 화면을 계속 업데이트하겠습니다.