▼ Vue에 리스트를 그려주기 위해서 데이터를 정의합니다. 배열 형태의 animals라는 데이터를 정의하고 3개의 데이터를 추가해 줍니다. 각 데이터에는 food라는 값이 있습니다. 이 값 역시 배열로 이중 리스트를 그리기 위해서 필요합니다. 나머지 값의 출력은 생략하고 Vue에서 이중 for 문 형태의 값을 출력해 보겠습니다. ▼ 이번에는 데이터가 잘 나오는지 확인하기 위해 div 태그에 animals 값을 그대로 출력해 보겠습니다. 머스타치 문법으로 animals를 표시합니다. 뷰의 Mustache 문법은 {{ }} 안에 데이터를 출력하는 방법으로 실제 데이터가 그대로 렌더링 되는 것을 볼 수 있습니다. 값을 확인하기 위해서 출력해보겠습니다. ▼ 이번에는 div 태그에 v-for 예약어를 통해서 an..
▼ 다음과 같이 Person 데이터 구조체와 staff 라는 Person 배열을 생성합니다. 그리고 view에 ForEach 구문을 통해서 리스트를 표현해줍니다. 그럼 간단한 리스트를 확인할 수 있습니다. ▼ 이제 VStack와 HStack을 이용해서 이름뿐만 아니라 전화번호 그리고 전화기 모양의 아이콘을 리스트로 표현합니다. 그밖에 옵션으로 텍스트 색상과 폰트를 설정해줍니다. ▼ 위의 코드도 잘 동작하긴 하지만 view 안쪽에 많은 코드가 들어가서 보기가 좋지 않습니다. 다음과 같이 PersonRowView 라는 해당 Row를 표현하는 새로운 뷰를 만들어줍니다. ▼ 이제 뷰를 재사용해서 좀 더 단순하게 표현할 수 있습니다. ▼ List에 그룹을 만들어보겠습니다. 우선 더 이상 staff 배열은 사용하지..