[4강] 합성 컴포넌트와 네스티드 인스턴스

 

합성 컴포넌트

• 일반적으로 컴포넌트는 파운데이션 요소를 모아 만들고, 컴포넌트를 모아 더 큰 단위를 만들기도 한다. 하지만 컴포넌트에 컴포넌트 또는 파운데이션을 결합한 컴포넌트인 경우도 있으며, 이를 합성 컴포넌트라고 한다.
• 합성 컴포넌트로는 보통 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있다.

네스티드 인스턴스 : 감싼 인스턴트

• 재료로 쓰인 컴포넌트를 하위, 본체를 상위라고 봤을 때, 상위 컴포넌트에서도 하위 컴포넌트 속성을 조작할 수 있도록 하는 기능.
• 네스티드 인스턴스를 가진 컴포넌트들은 대부분 컴포넌트 내부에 다른 컴포넌트들이 들어 있기에 합성 컴포넌트다.

탭 컴포넌트

• 네비게이션 컴포넌트에 해당하는 컴포넌트로, 현재 화면을 전환해주는 요소이다.
• 구조 : 개별 아이템인 탭 메뉴와 메뉴를 모아 만드는 탭으로 구성 가능하다.
  -인디케이터 : 탭이 선택되어 있는지 알려주는 표시자.
  -라벨/레이블 : 탭 제목 나타내는 텍스트로 탭 이름에 해당하는 부분.
• 디자인의 다양함 : 탭은 서비스마다 다양한 디자인을 사용하지만, 선택된 것과 선택되지 않은 것을 명확하게 구분할 수 있어야한다.

실습 : 탭 만들기

• 탭의 라벨이 될 글자를 입력하고 오토 레이아웃으로 감싸 줍니다.(상하 패딩 8px, 좌우 패딩 12px)

• 하나를 복제해서 원본과 복제품 둘 다 선택해서 프레임 옵션 패널의 Create Component 옆의 화살표를 눌러 나오는 Create Component set을 누른다. 해당 기능은 여러 개체를 한 번에 배리언츠로 만들면서 하나의 컴포넌트로 묶을 수 있다.

• 만들어진 프로퍼티의 이름을 Active로 변경하여 탭이 활성화 되었는지 아닌지의 상태값을 만들어주고 각각의 배리언츠 값을 on,off로 적용해준다.

• on과 off 배리언츠에 스타일을 적용해서 구분하기 쉽게 한다. 
  
  

 

• 컴포넌트 이름을 Tab memu로 변경하고, 복제본을 만든다.

 

• 복제본에 탭 메뉴를 보면 on/off에 따라서 변경되는 걸 확인할 수 있다.

 

• 복제된 인스턴스 둘을 오토레이아웃으로 묶고, Create component를 통해서 컴포넌트 화 시킨 뒤, 이름을 Tab으로 한다.

 

• 오토 레이아웃 간격을 0으로 만들고 off 인스턴스를 2개 더 복제해서 옆에 넣는다.

• 탭 컴포넌트를 선택하고, 프레임 옵션 패널에서 +를 눌러 프로퍼티 목록에서 Nested Instances 를 누르면

 

사진 처럼 탭 메뉴 인스턴스 목록이 뜨면 모두 체크해준다.

• 정상적으로 처리되면 탭 메뉴에 목록이 추가된 모습을 볼 수 있다.

• 탭 컴포넌트를 복제한 인스턴스를 만들면, 탭 메뉴 인스턴스에 만든 Active 속성이 바로 보이는 걸 알 수 있다. 이를 통해 탭 메뉴 조작 없이도 컴포넌트에서 전환하며 사용이 가능하다.