03. 화면을 개발하기 위한 필수 단위

[jiyeong1004]

• 인스턴스 & 컴포넌트

< 03-1 뷰 인스턴스 >

• 뷰 인스턴스의 정의와 속성
• 뷰 인스턴스 옵션 속성
• 뷰 인스턴스의 유효 범위
• 뷰 인스턴스 라이프 사이클

< 03-2 뷰 컴포넌트 >

• 컴포넌트란?
• 컴포넌트 등록하기
• 지역 컴포넌트와 전역 컴포넌트의 차이

< 03-3 뷰 컴포넌트 통신 >

• 컴포넌트 간 통신과 유효 범위
• 상 . 하위 컴포넌트 관계
• 상위에서 하위 컴포넌트로 데이터 전달하기
• 하위에서 상위 컴포넌트로 이벤트 전달하기
• 같은 레벨의 컴포넌트 간 통신
• 관계 없는 컴포넌트 간 통신 - 이벤트 버스

[jiyeong1004]

앞 예제 코드 실행 결과 화면

• 첫 번째 인스턴스 영역과 두 번째 인스턴스 영역을 구분하기 위해 구분선으로는 <hr> 태그를 사용했습니다.

• 첫 번째 인스턴스 영역에는 전역, 지역 컴포넌트가 모두 정상적으로 나타났습니다. 하지만 구분석 밑에 두 번째 인스턴스 영역에는 전역 컴포넌트만 나타나고, 지역 컴포넌트는 나타나지 않았습니다.

• 그 이유는 전역 컴포넌트와 지역 컴포넌트의 유효 범위가 다르기 때문입니다.

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요 없이 한 번 등록하면 어느 인스턴스에서든지 사용할 수 있습니다. 반대로 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해 줘야 합니다.

[jiyeong1004]

코드 결과를 크롬 개발자 도구의 'Elements' 패널에서 확인

• <my-local-component> 태그는 두 번째 인스턴스의 유효 범위 안에 있더라도 이 컴포넌트가 등록된 첫 번째 유효 범위를 벗어나기 때문에 브라우저에서는 HTML 사용자 정의 태그로 인식하고, 뷰에서는 해당 컴포넌트를 제대로 등록했는지 물어보는 오류를 표시합니다.

참고 : 오류를 해결하려면 지역 컴포넌트에 components 속성을 추가하여 다시 실행하면 됩니다.

[jiyeong1004]

이벤트 발생 예제 실행 결과 화면

[jiyeong1004]

이벤트 버스 예제 실행 결과 화면