SwiftUI로 IOS 개발하기(2) - 프로젝트 기초

안녕하세요. 뉴핀입니다.

SwiftUI로 IOS 개발하기(1) - 입문, 프로젝트 생성

이번 주제는 SwiftUI로 구성한 프로젝트의 기초적인 내용에 대하여 알려드리려고 합니다.

먼저 프로젝트를 처음 생성하게 되면

아래와 같은 구성으로 확인 할 수 있습니다.

1. Navigator : 프로젝터 내 폴더 및 파일을 확인할 수 있는 영역
2. Editer : 코드를 편집 하는 영역
3. Preview : 현재 Editer에 작성 되어 있는 View를 미리 볼 수 있는 영역
4. Inspector : 선택 된 다양한 객체들의 속성을 관리하는 영역

먼저 Navigator를 보시면

{ProductName}App.swift 는 앱에서 제일 처음 실행 되는 코드라고 생각 해주시면 됩니다. 해당 코드에서 앱에서 사용 할 데이터의 초기화를 진행 해주시거나 최초 진입 화면을 설정 할 수 있습니다.

최초로 생성 되는 View인 ContentView는 앱에서 표시하는 화면 단위의 코드라고 생각 해주시면 됩니다. 해당 코드를 통하여 화면을 구현하고 Preview 영역을 통해 현재 구성 중인 View들의 모습을 확인하실 수 있습니다.

ContentView를 계속 보시면 struct로 구성 되어 있으며 protocol인 View가 채택 되어 있습니다.

Protocol이란?

Swift의 문법으로써 사용할 인터페이스들을 정의하고 해당 프로토콜을 채택하여
구현 할 때 필요한 요소들을 제공 해주는 일종의 약속이라고 생각 해주시면 됩니다.

View Protocol의 body는 View로 정의되어 있으며. 다른 View들을 기입 해주시면 됩니다.

(따라서 이론적으로 ContentView의 body에 ContentView를 넣어 줄 수 있으며 실제로는 끝없이 재귀하기 때문에 에러가 발생 합니다.)

body에 삽입 되는 View에는 앞으로 설명 드리게 될 Text, Button, VStack, HStack등 의 여러가지 View들을 작성 해주시면 화면이 구성됩니다.

ContentView_Previews는 해당 구조체 안의 previews의 내용을 기준으로 Preview영역에서 확인할 수 있습니다.

첫 빌드를 해보기 전에 해당 View의 데이터를 초기화 할 수 있는 생성자에 대하여 알아보도록 하겠습니다.

생성자란?

클래스나 구조체 등의 문법으로써 해당 객체 생성 시에 최초로 실행 되는 함수 입니다.

Swift의 생성자는 init()으로 구성 할 수 있으며

import SwiftUI

struct ContentView: View {
    // insert this
    init(){ 
        print("Hello, Nufyn!")
    }
    //
    
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위와 같이 print를 찍고

⌘+R 이나 Navigator의 우측상단 Start 버튼, XCode메뉴의 Product-Run을 으로 빌드 해보면

위와 같이 하단 콘솔 영역에  Hello, Nufyn!  이 출력 되는 것을 확인하실 수 있습니다.

위와 같이 하단 콘솔 영역에 Hello, Nufyn! 이 출력 되는 것을 확인하실 수 있습니다.

오늘은 XCode의 화면 설명과 View에 대하여 알아 보았습니다.

다음에는 더 유익한 내용으로 찾아 뵙겠습니다.

감사합니다.