앵귤러에서 제공해 주는 내장 파이프 사용하면 편리하게 프로퍼티의 값을 변환한 후 뷰에 표시할 수 있습니다.
이번 포스트에서는 나만의 커스텀 파이프를 만들어 보겠습니다.
이번 포스트에선 아래의 내용을 다루고 있습니다.
- 커스텀 파이프 쓰임새
- 커스텀 파이프 만드는 법
- 템플릿에서 파이프 사용법
커스텀 파이프 쓰임새
내장 파이프에 지원하지 않는 변환이 필요할 경우 커스텀파이프를 제작 하여 사용 할 수 있습니다.
아래 개발중인 화면이 있습니다.
영화 제목에 spider-man처럼 대시(-)가 들어간 문자열이 존재 하네요.
모든 영화 제목에 포함된 대시(-)를 빈 공백 문자로 표시하라는 요구사항을 받았다고 가정해 봅시다.
이런 경우 커스텀파이프를 제작하여 이용하면 편리 합니다.
커스텀 파이프 만드는 법
커스텀 파이프를 만드는 방법은 어렵지 않습니다.
아래와 같이 앵귤러 컴포넌트를 만드는 패턴과 매우 유사한 패턴을 사용합니다.
1.데코레이터 정의
파이프 데코레이터를 클래스에 추가하여 파이프로 정의합니다.
우리가 사용했던 다른 데코레이터와 비슷하게, 함수이기 때문에 괄호를 추가합니다.
name에 정의하는 값은 템플릿에 사용된 파이프의 이름입니다.
2.클래스작성
transform이라는 메서드가 있는 PipeTransform인터페이스를 구현하여 클래스를 작성합니다.
3.transform메서드 작성
Transform메서드 안에는 값을 변환하고 반환하는 코드를 작성합니다.
첫 번째 매개변수(value)는 변환하는 대상 값입니다.
추가 매개변수에는 변환을 사용하는데 쓰이는 인수들을 정의할 수 있습니다.
4.import문
필요한 import문 Pipe와 pipeTransform을 선언합니다.
템플릿에서 파이프 사용법
템플릿에서 사용하는 방법은 파이프( | )를 쓰고 파이프 이름을 추가하는 것 입니다.
그리고 변환에 필요한 인수를 콜론으로 구분하여 넣으면 됩니다.
위 예의 변환되는 값(movie.name)은 transform메서드에 대한 첫 번째 인수로 전달됩니다.
파이프 이름(convert)뒤의 콜론으로 구분된 '-'과 ' '은 두 번째, 세 번째 인수로 전달 됩니다.
이제 커스텀파이프의 전체 코드를 만들어 보겠습니다.
커스텀파이프의 파일명은 네임컨벤션에 따라서 convert.pipe.ts로 만들었습니다.
그리고 커스텀 파이프 파일은 공통으로 쓰여지는 파일이므로 shared폴더 아래에 놓겠습니다.
데코레이터를 보면 파이프의 이름은 convert로 하였고, 이것은 html에서 파이프를 참조할 때 사용되는 이름입니다.
클래스 명은 ConvertPipe이고 PipeTransform을 implements하고 있습니다.
PipeTransform인터페이스를 구현했으므로 해당 인터페이스에 정의된 속성과 메서드를 구현해야합니다.
PipeTransform인터페이스는 transform하나만 가지고 있습니다.
transform메서드의 첫 번째 매개변수(value)는 변환 할 문자열값, 두 번째(fromChar)는 변환대상문자, 세 번째(toChar)는 변환되는 문자를 정의 하였습니다.
그리고 자바스크립트의 replace를 이용하여 지정된 문자열을 다른 문자열로 바꾸고 리턴해 주었습니다.
이제 파이프가 완성되었습니다.
파이프가 사용되는 템플릿을 다시 보겠습니다.
변환을 원하는 프로퍼티 뒤에 파이프( | )기호를 넣고 우리가 만든 커스텀파이프인 convert를 썼습니다. 그리고 콜론( : ) 후에 매개변수로 '-'와 ' '을 넣었습니다.
마지막으로 모듈에 만든 파이프를 선언해 주는걸 잊지 마세요.
브라우저에서 확인해 보겠습니다.
spider-man에서 spider man으로 표시 되었습니다.
파이프가 잘 작동 하네요.🎉
어떤 식으로 파이프를 사용해야 하는지 감이 오시나요?
여기까지 수고하셨습니다.
다음 포스트에서는 필터 기능을 구현하면서 getter, setter기능을 소개해 보려고 합니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 18.컴포넌트 중첩(Nested Component) (0) | 2022.01.27 |
|---|---|
| 앵귤러 기초(Angular basic) 17.getter, setter(게터, 세터) (0) | 2022.01.26 |
| 앵귤러 기초(Angular basic) 15.생명주기(lifecycle), hook (0) | 2022.01.25 |
| 앵귤러 기초(Angular basic) 14.컴포넌트 스타일 캡슐화 (0) | 2022.01.24 |
| 앵귤러 기초(Angular basic) 13.인터페이스(interface) (0) | 2022.01.23 |
댓글