[강좌] SwiftUI 에서 viewDidLoad 처리 방법 구현

이번 시간에는 SwiftUI 프로젝트에서 viewDidLoad 처리 구현 방법을 알아 보도록 할께요.

우선 Xcode 를 이용하여 새로운 프로젝트를 생성하는데요. 프로젝트 이름은 편의상 viewDidLoad 라고 할께요. Xcode 프로젝트 개발에 많은 경험이 있으신 분들은 "단계 3" 으로 넘어가시면 좋으실 것 같아요.

우선, 코드의 기획 단계를 알아 볼께요.

 

단계 1: 프로젝트 생성

Xcode => File => New => Project 메뉴를 선택하여 새로운 프로젝트를 생성할 수 있어요.

Xcode 새로운 프로젝트 생성 메뉴

 

다음과 같은 프로젝트의 탬플릿을 선택할 수 있는데요. 우리는 여기서 편의상 macOS 를 선택하도록 할께요. 참고사항으로  SwiftUI 를 사용할 수 있는 프로젝트에 적용되는 기술이기 때문에 다른 (예를 들어 iOS 등) 프로젝트를 만드셔서 진행하셔도 되는데요. 본 강좌에서는 구현 기술만을 배우는 것이기 때문에 macOS 를 선택하도록 할께요.

Xcode 에서 새로운 프로젝트 생성

[App] 을 선택하시고 [Next] 버튼을 눌러 다음 단계로 넘어 가실께요.

다음과 같이 새로운 프로젝트 이름 등을 입력하도록 하는데요. 지금 우리는 편의상 viewDidLoad 라는 프로젝트 이름을 사용하기로 하였잖아요. 그래서, Project Name 에 "viewDidLoad" 라고 입력 하시고요. 다른 항목들은 여러분들의 애플 개발자 계정 정보를 이용하시면 되실 거예요.

* 본 강좌에서 이런 내용이 큰 비밀은 아니기 때문에 특별히 모자익 처리는 하지 않도록 할께요.

Interface 는 SwiftUI 를 선택하시고요. Language 는 Swift 를 선택하고 진행 하실께요. 또한, Use Core Data 및 Include Tests 는 체크 오프 하도록 할께요. 필요하신 분은 체크 온 하셔도 본 강좌에서 별다른 영향이 없다는 것을 말씀 드릴께요.

입력을 하셨으면 [Next] 버튼을 클릭하여 다음과 같이 프로젝트를 생성 할 폴더를 선택하여 프로젝트를 생성 할 수 있는 단계가 되었어요.

저는 여기서 [New Folder] 버튼을 클릭하여 viewDidLoad 라는 폴더를 생성 한 후 그 안에 프로젝트를 생성하여 진행 할께요. 여러분도 알맞은 폴더 위치에 프로젝트별로 폴더를 생성하셔서 진행하시면 좋으실 것 같아요.

* 여기서 잠깐... 해당 폴더에 프로젝트 이름의 폴더가 자동으로 생성 되네요. 굳이 viewDidLoad 라는 폴더를 별도로 만드실 필요까지는 없어 보여요.

이제 [Create] 버튼을 클릭하여 프로젝트를 생성 할 수 있답니다.

 

단계 2: 프로젝트 기초

본 강좌는 Xcode 를 이용하실 수 있다는 전제하에 설명을 드리는 것이기 때문에 Xcode 에 대한 전반적인 사용법은 별도의 강좌가 준비되어 있으니 참고 바랄께요.

여러분들의  Xcode 환경이 다르실 수도 있지만 아마도 대략 다음과 같은 화면으로부터 시작되실 거예요. 우리는 여기서 이렇게 시작해 보는 것으로 할께요. 물론, 본 강좌를 그대로 따라 하시는 거라면 거의 다 똑같으실 거예요.

이 기초적인 프로젝트가 어떻게 생겼는지 실행을 한번 해 볼께요. 실행 버튼은 Xcode 왼쪽 상단의 플레이 버튼 (삼각형 모양) 을 이용하시거나 메뉴 Product => Run 을 이용하시거나 혹은 핫키를 (cmd R) 을 이용하시면 되실거예요.

짠~~~ 이렇게 화면에 viewDidLoad 라는 앱이 실행되는것을 보실 수 있어요. 역시 Hello, world! 죠? 프로그래밍 강의에 가장 많이 등장하는 주제이기도 하고요.

사실 우리는 SwiftUI 에서 viewDidLoad 이벤트 처리를 하기 위한 정도의 기술을 습득하기 위해서 여기에 있는 것이기도 하잖아요. 그래서, 지금 까지의 내용은 여러분들에게 소위 말하는 "그냥 껌 같은" 정도 일 거라고 생각이 되네요. 하지만, Xcode 를 이용하여 앱 개발을 새롭게 접근하시는 분들도 계실 것으로 생각되기 때문에 가장 기초적인 것을 설명 드린 것이니 양해 부탁 드릴께요.

여기 오신분들이 가장 크게 궁금해 하시는 것이 아마도 앱을 만들때 가장 기본적으로 사용하시던 viewDidLoad 이벤트를 도대체 SwiftUI 를 이용할 때는 어떻게 해야 하지? 라는 것으로부터 시작되었을 거예요. 즉, 이미 애플용 앱을 많이 만들어 보신 개발자 분들일 것이라는 거죠.

사실 SwiftUI 에서는 viewDidLoad 같은 것을 구현 할 이유는 딱히 없어요. 굳이 구현하는 것은 이전 코드 개발하시는 분들이 가장 기본으로 사용하시던 이벤트 함수를 계속 사용하고 싶다는 것에 기인하는 것이기도 해요. 저 역시 그냥 익숙한 함수를 사용하고 싶어서 사용하고 있는 것이며 이렇게 설명을 드리는 것이기도 해요. 사실. 제가 자꾸 잊어버리는 경향이 있어서 잊지 않도록 블로깅 해둔다고 봐도 되요.

 

단계 3: 프로젝트 코딩

어쩌다 보니 서론이 길었네요. 이제 본격적으로 시작해 보도록 할께요. 헉... 이제야? ㅋㅋㅋ

ViewDidLoadModifier

SwiftUI 에서 기본적으로 제공하는 ViewModifier 라는 protocol 이 있는데요. 우리는 이것을 이용해서 ViewDidLoadModifier 라는 우리만의 struct 를 만들거예요. struct 를 직역하면 "구조" 라고 해석하면 되실 것 같아요.

왼쪽에 있는 프로젝트 목록의 트리에서 viewDidLoad 폴더를 선택 하신 후 마우스 오른쪽 버튼을 클릭하여 New File... 이라는 메뉴를 선택하시면 새로운 소스 파일을 생성 할 수 있어요. 한번 같이 해 볼께요. 다음 그림에 설명된 내용을 따라서 하실께요.

New File... 메뉴를 선택하시고

Swift File 을 선택하시고 Next 버튼을 이용하여 다음 단계로 가겠습니다.

ViewDidLoadModifier 를 입력하시고 Create 버튼을 클릭하시면 됩니다.

 

이제 프로젝트에 다음과 같이 소스 파일이 하나 추가되어 있을 것인데요. 우리는 이 소스파일에 내용을 채울 거예요. 여기 오신 여러분들의 실력으로는 별로 어려운 것은 없을 거예요.

코드 스니펫은 다음을 이용하시면 편하실 것 같아요.

import Foundation
import SwiftUI

struct ViewDidLoadModifier: ViewModifier {
	@State private var viewDidLoad = false
	let action: (() -> Void)?
	
	func body(content: Content) -> some View {
		content
			.onAppear {
				if viewDidLoad == false {
					viewDidLoad = true
					action?()
				}
			}
	}
}

별도로 설명이 필요없는 코드이긴 하지만 그래도 강좌이니 간략하게나마 설명을 드릴께요.

1. 우선 Foundation 과 SwiftUI 를 import 하였습니다.
2. ViewModifier 를 가져와서 ViewDidLoadModifier 를 구성합니다.
3. viewDidLoad 라는 State 변수를 선언하고 초기값으로 false 를 선언 하였습니다.
4. action 이라는 이름의 변수를 선언 하였는데요. 이것은 함수를 지칭하는 변수이며 null 을 허용하고 있습니다.
5. body 안에 content 가 onAppear 될 때 viewDidLoad 변수가 false 값이면 viewDidLoad 변수값을 true 로 주고 action 이 유효하면 action 을 콜하는 단계로 구성 되었습니다.

딱히 깊게 설명을 드릴 정도의 코드는 아니지만 그래도 참고하시면 좋으실 것 같아요.

ViewExtension

이제 View 기능을 확장시키는 코드를 작성할께요. Swift 의 유용한 기능으로써 확장이 매우 편하게 이루어진다는 것이예요. 아마도 여러분들도 많이 사용하고 계실 것으로 생각되네요.

앞에서 설명 드린 ViewDidLoadModifier 소스 파일을 생성하는 과정이 있는데요. 그와 똑같은 과정으로 다음과 같이 ViewExtension 이라는 소스 파일을 만들고 코드를 입력하시면 된답니다.

ViewDidLoadModifier 만드는 방법과 똑같은 절차로 ViewExtension 소스 파일을 생성하여 내용을 입력해 보세요.

import Foundation
import SwiftUI

extension View {
	func onViewDidLoad(perform action: (() -> Void)? = nil) -> some View {
		self.modifier(ViewDidLoadModifier(action: action))
	}
}

마찬가지로, 이 코드에 대한 설명을 간략하게 드리면 다음과 같아요.

1. View 라는 SwiftUI 기본 오브젝트에 대한 확장 코드 입니다.
2. onViewDidLoad 라는 함수 (func) 를 선언하였고, 인수로 null 이 기본값인 action 을 가졌습니다.
3. 우리가 앞에서 만든 ViewDidLoadModifier 를 View 객체의 modifier 로 설정하는 코드입니다.

이제, 우리는 SwiftUI 프로젝트 코드의 View 에서 onViewDidLoad 를 사용 할 수 있게 되었는데요. 한번 사용해 볼께요.

앞의 기초 설명에서 설명 드린 Xcode 에서 제공하는 기본 탬플릿에 .onViewDidLoad 라는 부분을 추가한 것이예요.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
        .onViewDidLoad {
            print(">>> viewDidLoad")
        }
    }
}

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

실행 해 보시면 print 에 의해서 Xcode 의 하단에 표시되는 내용을 확인해 보실 수 있는데요. 큰 문제가 없다면 Xcode 하단에 ">>> viewDidLoad" 라고 출력되는것을 확인하실 수 있으실 거예요.

 

완성!

축하 드려요. 여러분들은 SwiftUI 의 View 에 대하여 onViewDidLoad 를 사용하실 수 있게 되었답니다. 사용된 코드는 매우 간단하며 쉽게 여러분들의 메인 코드에 적용하실 수 있으실 것으로 생각되는데요. 활용해 보세요.

이로써 SwiftUI 에서 viewDidLoad 이벤트 함수를 만들고 사용하는 방법에 대하여 알아보았어요.

 

이번 강좌가 도움이 되셨길 바랄께요. 또한, 다음 강좌를 빠른 방법으로 확인 하실 수 있는 방법은, 본 채널의 구독과 좋아요 그리고 알람 설정을 해 두시면 도움이 되실 거예요.

유튜브 채널은 다음을 이용하시면 되실 거예요.

https://youtube.com/watch?v=ayGbkfJY-FQ&feature=share&si=EMSIkaIECMiOmarE6JChQQ 

 

또한, 본 강좌에서 완성된 소스 프로젝트는 https://github.com/appresorg/learn 에서 찾아보실 수 있으세요.

GitHub - appresorg/learn

 

감사합니다.