4장

뷰를 구성하는 기초

앞서 Ch03에서 다루었던 것처럼 앵귤러는 컴포넌트 단위로 뷰를 생성하고 관리한다.

• 컴포넌트
• 탬플릿

위의 2개를 바탕으로 뷰를 만듭니다.

컴포넌트

@Component 데코레이터가 있는 부분이라고 해도 과언이 아니다. 일차적으로는 클래스 를 포함하고 있으면서 2차적으로는 메타데이터 를 가지고 있는 것이라고 생각하면 된다.

• 클래스는 뷰에서 이루어지는 일을 관리하는 코드이다.
• 메타데이터는 총 18가지로 설정 정보를 Json객체로 담아 놓은 것이다.
• 컴포넌트에도 템플릿 소스를 넣을 수 있지만 html파일로 따로 분리하는 것이 좋다.

18가지의 설정 정보(간략하게 정리)

• 설명을 더 하자면 단어 뒤에 s가 붙은 것들은 배열로 들어갈 수 있다는 것으로 여러개가 들어갈 수 있다.

1. selector
   • CSS선택기 문법으로 요소명을 정의하기 위하여 사용
   • 작성하지 않으면 템플릿에서 컴포넌트를 사용할 수 없으므로 사실상 필수 정보 이다.
2. template
   • 템플릿 소스를 적는 공간으로 선택적이다.
3. templateUrl
   • 템플릿 소스가 있는 파일의 위치는 공간이다.
   • 컴포넌트에 있어서 템플릿을 필수이므로 2번과 3번중에 하나는 필수 이다.
   • 위치만 적어주면 CLI가 알아서 해당 파일을 번들링해준다.
4. styles
   • CSS 정보는 적는 공간 최대한 따로 파일을 빼는 것이 좋다.
5. stylesUrl
   • 스타일 정보가 있는 위치는 적어주는 곳으로 앞에서 설명과 같이 s가 붙으므로 여러개의 파일의 위치를 작성할 수 있다.
6. animations
   • 이 컴포넌트의 애니메이션 리스트를 적는 곳
7. changeDetection
8. encapsulation
9. entryComponents
10. exportAs
11. host
12. inputs
    • 클래스 프로퍼티 명의 리스트를 컴퍼넌트의 입력으로서 바인드합니다.
13. interpolation
14. moduleId
15. outputs
    • 다른 사람들이 등록 할 수있는 출력 이벤트를 노출하는 클래스 속성 이름의 목록
16. providers
    • 이 구성 요소와 그 자식이 사용할 수 있는 공급자 목록
17. queries
    • 구성 요소에 삽입 할 수 있는 쿼리 구성
18. viewProviders
    • 이 컴퍼넌트 및 그 뷰의 자식에 사용할 수있는 provider의 list

템플릿

컴포넌트의 뷰를 구성하는 정보입니다. 앵귤러는 표준 HTML에 앵귤러만의 추가 요소와 문법적 기능으로 작성된 템플릿 코드를 기반으로 컴포넌트의 뷰를 렌더링합니다.

• 선언방식 : 절차적 / 선언적 방식

절차적 프로그래밍

• 뷰를 구성하는 DOM에 직접 접근하여 데이터를 노출시키거나 뷰의 상태를 가져와 일련의 로직을 처리하는 등 일일이 수행

선언적 프로그래밍

• 뷰를 구성하는 템플릿 안에 컴포넌트와 뷰의 관계를 선언
• DOM에 접근하는 역할은 앵귤러에 위임

더 깊이 보기위해서는

• 데이터 바인딩 보러가기

• 지시자 보러가기

• 파이프 보러가기