[Section 04] 컴포넌트 이해와 활용

🔮 컴포넌트의 원리와 마스터, 인스턴스 이해하기

• 마스터: 채워져있는 마름모. 컴포넌트를 만들 때 이용된 요소(?)
• 인스턴스: 빈 마름모. 컴포넌트를 복사해서 만든 요소

🔮 와이어프레임 컴포넌트 만들기

1. 먼저 손으로 디자인을 그린다
2. 많이 반복되는 요소를 결정한다. (이미지 박스나, 상단 메뉴틀 등)
3. 이미지 박스, 박스, 텍스트, 아이콘 박스를 컴포넌트로 만들어 놓는다.
4. 프레임에 컴포넌트를 붙혀넣으며 손으로 디자인 했던 부분을 그려 넣는다.

🔮 컴포넌트를 결합하는 variants 이해하기

1. 각 요소를 컴포넌트로 만든다. -> 프레임으로 만들고 컴포넌트로 만들어준다.
2. 컴포넌트들을 선택하여 우측 패널에 Combine as Variants 를 통해서 묶어준다.
3. property의 이름을 바꾸어 주고 해당 속성값을 설정해준다.
4. property를 추가하여 이름과 속성값(on, off)에 해당하는 컴포넌트를 설정해준다.

🔮 예제 실습: 텍스트필드 컴포넌트 variants

• Inactive: 기본 상태
• Focused: 커서가 텍스트필드 안에 있을 때
• Activated: 텍스트가 다 입력된 상태
• Hover: 마우스를 텍스트필드로 가져갔을 때
• Error: 입력한 텍스트 값에 문제가 있을 때
• Disabled: 텍스트를 입력할 수 없을 때