안녕하세요!
오늘부터 SwiftUI를 포스팅할 거에요!
앞으로 열심히 SwiftUI를 공부하면서 포스팅해볼게요^^
먼저 이번 포스팅에서는 SwiftUI 프로젝트는 어떻게 생성하는지, SwiftUI의 장점은 무엇인지 등 "기본" 적인 내용에 대해서 알아볼 거에요!
모든 말투는 편의 말투로 진행하겠습니다!
1. SwiftUI 프로젝트 생성하기
먼저 SwiftUI 프로젝트를 생성하는 방법에 대해서 알아볼거임!
별거 없음 기존과 똑같이 프로젝트를 만들면 됨
하.지.만 SwiftUI는 Interface를 Storyboard가 아닌! SwiftUI를 선택해서 프로젝트를 생성
해 줘야 함!
이렇게 Next 버튼을 누르면 프로젝트가 생성이 됨. 그럼 아래와 같은 화면을 볼 수 있음!
이렇게 ContentView라는 녀석이 생성되면서, 이전과는 다르게 생소한 화면이 나타남!
이게 바로 SwiftUI로 프로젝트를 만들었을 때의 기본 화면?이라고 보면 됨!
왼쪽은 대충 코드를 작성하는 곳이고, 오른쪽 핸드폰 화면을 볼 수 있는 영역이 Preview라는 기능임!
이 기능이 무엇이냐 SwiftUI의 기능 중 하나인 미리보기 기능이라고 이해하면 됨!
2. ContentView 파일 알아보기
ContentView 파일 안이 어떻게 구성되어 있는지, 왼쪽 코드와 오른쪽 Preview와 어떤 식으로 서로 동작하는지에 대해 알아보겠음
먼저 ContentView란 파일은 총 두가지 구조체로 구성되어 있음.
ContentView는 화면을 그리는 구조체임.
ContentView_Previews는 Preview를 그리는 구조체임.
3. ContentView를 통해서 직접 텍스트를 수정해보기.
자 그럼 ContentView 구조체를 통해서 Preview에 보여지는 Hello, World라는 텍스트를 변경해 보겠음.
아마 벌써 눈치챈 사람이 있을 거임.
이렇게 Text의 글자를 바꿨는데 신기한 일이 발생함. 바로 Preview가 실시간으로 바뀐다는 거임!!
심지어 역으로, Preview에서 글자를 바꿔도 "코드"가 "자동"으로 수정됨.. 개짱인 기능임.. 이것이 바로 Preview의 기능임!
미리보기 뿐만 아니라, 마치 스토리보드처럼 원하는 기능을 추가할 수도 있음. 물론 당연히 위 기능들은 직접 코드로도 추가할 수 있음
(코드도 자동으로 추가되는 점에서 스토리보드와 매우 다름)
그리고 이렇게 ContentView 안에 추가되는 코드를 보면, Text라는 것 밑에 .을 통해서 속성을 나열 하는데,
(.font, .fontWeight, .foregroundColor 등등) 이것을 SwiftUI에서는 modifier라고 부름!
이렇게 modifier를 추가하면서 다양한 속성을 통해서 코드를 구현할 수 있음!
.
.
.
.
.
.
이렇게 오늘 포스팅에서는 SwiftUI 프로젝트 만들기, ContentView 파일 알아보기, 직접 수정해 보기 등 기본적인 동작에 대해 알아봤습니다!
이번 포스팅을 작성하기 위해서 개발자 소들이 님 블로그를 참고하였습니다! 더 자세하게 기록되어 있으니 참고 부탁드립니다!
출처) https://babbab2.tistory.com/157
