[SwiftUI] 기본적인 Todo 앱 만들기 01 (Stack으로 View 구성하기)

안녕하세요. 오늘은 SwiftUI 로 가장 기본적인 Todo앱을 만들어보려고 합니다.

제가 아직 초보이다 보니 유튜브를 보고 따라 만들며 모르는 부분은 채워나갈 예정입니다.

최대한 많이 찾아보며 할 예정이지만 그럼에도 불구하고 틀린 부분이 있을 수 있으니 수정사항은 댓글로 남겨주세요.

피드백은 언제나 환영입니다 😊

 

 

 

https://youtu.be/pbzcQgGnkYQ

 

제가 참고해서 만든 유튜브입니다. Todo앱 뿐만 아니라 SwiftUI로 다른 어플도 만드니까 공부하시는 분들 참고하세요!

 

최종 목표

이번에 만들 Todo 앱 입니다. Text 입력창과 버튼 그리고 Todo 목록이 담긴 리스트 이렇게 3가지로 구성되어 있습니다. 

 

우선은 xcode로 프로젝트를 생성합니다.

App 선택해주시고 Interface는 SwiftUI, Language는 Swift 선택해주시면 됩니다.

 

그럼 이제 Hello world가 나오는 ContentView를 확인할 수 있습니다!

혹시나 화면이 안보이면 iPhone 우측 상단 오른쪽에서 2번째 아이콘을 누르고 Canvas 체크해주신다음,  Resume 하면 잘 나오는 것을 확인할 수 잇습니다.

 

 

애플 공식 문서 https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views

 

이제 Stack을 이용해서 View의 대략적인 틀을 짜주겠습니다.

SwiftUI에서는 Stack이 도입되어서 View를 더욱더 쉽게 짤 수 있게 도와줍니다. 

HStack, VStack, ZStack 이렇게 3가지가 있습니다
HStack은 Horizontal의 약자로 안에 있는 View들을 가로로, VStack은 Vertical의 약자로 View들을 세로로 보여줍니다.

ZStack 은 z축을 생각하시면 편하실 거 같은데요, 보통은 View의 배경이미지를 설정할 때 자주 사용합니다.

위 Stack들을 제가 만들 앱에 적용시켜 줍니다.

 

 

초록색 - VStack, 파란색 - HStack

제가 만들 앱을 다시 살펴보면 크게 2가지 Stack으로 구분할 수 있습니다.

TextField 와 Button을 가로로 포함하고 있는 HStack과

HStack과 List를 세로로 포함하고 있는 VStack입니다

오른쪽 그림을 보면 한 눈에 이해하실 수 있을텐데요(피그마로 만들었어요 ㅎㅎ)

초록색 VStack 안에 파란색 HStack(TextField & Button) 이 있는 모습입니다.

이걸 코드로 작성해주면 아래와 같습니다

우선은 TextField 대신 Text로 넣어주었습니다(TextField안에 채울 Text 를 관리할 변수가 필요한데 변수 선언을 다음에 할 예정이므로 우선은 Text 로 작성하였습니다.)

그리고 List를 작성했는데, 또잉? 아무것도 안보이네요

 

이럴 때 확인할 수 있는 방법이 배경색을 넣는 것입니다~

빨간색으로 설정하니 리스트가 잘 보입니다!

이렇게 Todo앱의 View 틀을 짜보았습니다.

 

너무 간단하셨나요??

많이 접해보신 분들은 SwiftUI를 처음 접한다면 쉽지 않을 수도 있습니다.

아무래도 SwiftUI Reference가 적기 때문에 (한글로 된 건 더더욱...) 처음 접하는 분들도 쉽게 이해할 수 있도록 최대한 자세하게 설명하려고 합니다.

다들 Swift 고수가 되는 그날까지 화이팅 😁