[SwiftUI] 프로젝트 생성 및 TextView 사용해보기

미루고 미루다 드디어 시작한 SwiftUI 스터디.

애플 개발자 사이트에 SwiftUI Tutorials 라는 프로그램이 올라와있어서 원문 번역하면서 직접 해보는 걸로..! 추후에 공부하다가 잘못알고 있었던 것이나 수정할 부분이 생기면 바로바로 수정하러 와야겠다.

오늘은 프로젝트를 만들고 Text View를 사용해보자. (튜토리얼 페이지 에 Project File을 다운받을 수 있는 곳이 있어서 미리 다운 받아두고 활용하면 좋을 것 같다.)

Create a New Project and Explore the Canvas

그럼 일단 SwiftUI를 경험해보려면 프로젝트부터 만들어보자.

프로젝트 생성하기

1. 새로운 프로젝트 생성 화면에서 iOS의 App을 선택한다.

1. 다음 화면에서 Interface를 SwiftUI로 선택한다. (프로젝트 이름도 써주고 Organization Identifier도 잘 적어주기)

프로젝트 둘러보기 - LandmarksApp

만들어진 프로젝트를 구경해본다. LandmarksApp이라는 파일과 ContentView, Assets, Preview Content라는 목록이 보인다. (Test 폴더는 일단 무시해보자.)

기존에 사용하던 stroryboard와는 다르게 LandmarksApp이라는 파일이 생긴 게 눈에 띈다. 요 파일은 아래 세 가지를 기억하면 된다.

• SwiftUI를 사용한 앱의 라이프 사이클은 위 캡처 화면에서도 보이듯이 App 이라는 프로토콜을 채택한 struct를 사용한다.
• struct의 body 프로퍼티는 하나 또는 여러개의 scene(화면 구성에 필요한 content를 제공하는)을 리턴한다.
• main attribute는 앱의 entry 포인트!!

아마 기존의 AppDelegate 파일을 대체하는 공간인 것 같다.

프로젝트 둘러보기 - ContentView.swift

그럼 그 아래 파일인 ContentView 파일을 열어보자.

일단 제일 먼저 눈에 들어온 것은 import UIKit이 아닌 import SwiftUI라는 점이다. 그리고 우측에 Automatic preview가 있다는 점? .storyboard 파일이 없는 대신에 ContentView에서 코드를 작성하면 바로 화면을 볼 수 있게끔 되어있다.

애플에서 ContentView 파일에 대해 설명해둔 글을 가져와 보면

• 기본적으로 SwiftUI의 view 파일들은 두개의 struct를 제공한다.
  • View protocol을 채택한 ContentView struct는 view의 content와 layout에 대한 것들을 담는다.
  • PreviewProvider를 채택한 ContentView_Previews는 ContentView의 프리뷰 화면을 제공할 수 있도록 한다.

PreviewProvider를 채택한 struct에서 ContentView를 생성해준 것이 프리뷰 제공을 위한 것!

ContentView의 우측에 보이는 프리뷰 화면의 Resume 버튼을 눌러보자.

만약 프리뷰 화면이 보이지 않는 경우에는 Editor > Canvas를 체크해주면 나타난다.

프리뷰 화면에 선명히 보이는 시뮬레이터 화면. 이렇게 보니까 storyboard랑 되게 다르다.

hello world 나오는 부분을 다른 문자열로 바꿔주면 프리뷰 화면에서 실시간으로 갱신이 된다 오마갓…😮

Customize the Text View

그럼 프로젝트에서 기본으로 제공해주는 화면을 구경해봤으니 이번엔 기본으로 제공된 화면에 있던 Text View를 사용해보자.

Preview에서 inspector 활용해보기

프리뷰 화면에서 텍스트뷰에 파란 창이 나온 상태에서 커맨드를 누르고 클릭 한다.

그러면 아래와 같은 화면이 생겨나고 우리는 그 중에 Show SwiftUi Inspector 를 선택한다.

그 후 나타난 Inspector를 통해 text를 변경해보자. (text를 변경 후 엔터를 치니 코드와 프리뷰 모두 새로운 텍스트로 변경되었다.)

Text 입력 후 엔터 누르기 전	엔터 누른 뒤

다시 inspector를 열어 Font-Font의 설정값을 Title로 바꿔보자. 글씨가 거대해진다.

Text 입력 후 엔터 누르기 전	엔터 누른 뒤

ContentView의 body 코드 직접 변경해보기

padding() 메서드 대신 foregroundColor(.green)으로 변경해보기

As Is	To Be

SwiftUI view를 커스터마이즈 하기 위해서는 modifier라는 메서드들을 호출해야 한다. modifier 들은 줄바꿈하여 여러개를 사용할 수 있고 이들은 display나 여러 프로퍼티들을 변경한다.

마무리

오늘은 SwiftUI를 처음 알아보는 시간인 만큼 프로젝트 파일들이 뭔 모양인지, 기본으로 입력되어있는 코드들이 어떤 것인지를 알아보았다.

원래 쓰던 것과 전혀 다른 녀석이라는 사실을 절실히 깨달았다.. 그중에도 제일 신기한건 프리뷰! 코드를 수정하면 프리뷰 화면으로 바로 볼 수 있는것도, 프리뷰 화면에서 Inspector를 통해 값을 바꿔도 코드에 바로 적용이 되는것도 신기했다.

다음시간에는 Stacks를 사용해보는 시간인데, 원래도 StackView를 힘들어했던 터라 걱정이 된다.. 아무튼 SwiftUI 첫 포스팅 끝!