어디에 쓰이는가
자주, 재사용하는 요소 구성을 저장해서
복제, 변형을 용이하게 하는 기능입니다.
예를 들어 버튼, 카드 ui같은 것들이 있겠지요?
밑에 글을 보며 따라하면 이해하기 쉽습니다.
컴포넌트 만들기
컴포넌트는
1. 마스터 컴포넌트(원본),
2. 인스턴스(복사본)
두 가지로 구성됩니다.
- 오브젝트를 선택하고 윗쪽 패널의 create component를 누릅니다.
마름모꼴 아이콘이 붙고 테두리가 보라색으로 변하게 됩니다.
이 오브젝트는 마스터 컴포넌트가 됩니다.
인스턴스 만들기
마스터 컴포넌트를 복제합니다.
복제된 인스턴스는 빈 마름모 아이콘입니다.
컴포넌트 변형해보기
이건 마스터 컴포넌트의 패널입니다.
이건 인스턴스의 패널입니다. 저 부분이 다르죠?
저걸 클릭하면
이렇게 요소를 바꿀 수 있는 swap instance 창이 뜹니다.
교체 해봐야겠지요?
새로운 마스터 컴포넌트를 만듭니다.
그리고 인스턴스도 만들어 봅시다.
자 그리고 밑에 인스턴스를 선택 후 패널을 확인해 보면?
이렇게 다른 마스터 컴포넌트들로 바꿔줄 수 있습니다.
전혀 다른 모양으로 그리더라도, 컴포넌트 끼리는 교체할 수 있습니다.
이렇게 말이죠~ 네모 인스턴스를 하트 아이콘으로 바꾼 모습입니다.
그래서 어떻게 활용을?
이런 카드 UI가 있다고 칩시다. 이미 완성이 되었어요.
그런데.. 갑자기 하트 아이콘 컬러 변경을 해야하는 상황이 온다면?
하나씩 삭제하고 복붙해서 변경해주기 귀찮겠죠.
컴포넌트를 사용하면
필요할 때마다 이렇게 교체해줄 수 있습니다.
어떤 경우에 활용하게 되는지 감이 오시나요?
바로 다음 글에선
컴포넌트를 보다 효율적으로 사용할 수 있는 variants 베리언트에 대해 설명하겠습니다.
저녁놀 마을 사람