SwiftUI Beginner | 기초문법과 Navigation List

SwiftUI의 철학

거창하게 철학이라고 제목을 짓긴했지만 SwiftUI를 앞으로 어떻게 접근해야할지 감을 잡기 위해 문법과 동작원리를 간단하게 알아보자. 먼저 기본적으로 생성되는 코드를 보면 AppDelegate, SceneDelegate, ContentView이렇게 3개의 파일이 생성되는것을 볼 수 있다. SceneDelegate를 열어보면 ContentView의 인스턴스를 생성해서 UIWindowScene에 등록하는것을 볼 수 있다. 그리고 ContentView를 열어보면 구조체가 정의되어있는데 이 구조체를 생성해서 등록하면 화면에 해당 view가 그려지는것이다.

구조체는 body라는 변수를 가지고있는데, 모든 View는 이 변수를 가지고있어서 꼭 정의해주어야한다.

struct ContentView: View { 
	var body: some View { 
    	// content here 
    }
}

some이라는 associatedtype을 사용하기 때문에 꼭 하나의 View만 반환하지 않고, 여러개의 묶음도 반환할 수 있다. 이에 대해서는 swift 문법을 다루면서 더 자세히 알아보자.

코드를 보고 추측해보면 내부 프레임워크에서 이 View의 인스턴스에서 body변수를 가지고 그 내용을 화면에 그리는것 같다. 따라서 구조체의 body를 어떻게 정의하느냐에 따라 화면에 보이는 모습이 달라진다. 개발자가 정의한 구조, 규칙대로 View를 만들어서 화면에 그려주는것이다. 이렇게 하는것의 장점은 개발자가 해당 View가 화면의 어떤 위치에 그려질지 좌표에 대한 걱정을 전혀 하지않아도 된다는 것이다. 그저 연결된 View와 상대적인 위치규칙만 정해주면 어떤 크기의 화면에서도 같은 모습으로 보이게된다.

 

Tutorial Project 설계

그럼 이 swiftUI를 사용해서 앞으로 공부하면서 만들어갈 어플리케이션을 설계해보자. 여러가지 기능이 있기 때문에 이 기능들을 하나씩 넣어볼 수 있는 구조로 만들면 좋을거같다.

 

list를 만들고 list를 누르면 해당 기능을 구현한 view로 이동하게 만들어보자.

 

 

Tutorial Project 구현

먼저 ContentView의 이름을 바꾸고 List를 추가한다.

var body: some View {

	NavigationView() {

		List() {

			NavigationLink(destination: Text("Hello World!")) {

				Text("Touch me")
			}
		}
		.navigationBarTitle("Tutorials")
	}
}

NavigationLint의 destination에는 View를 할당할 수 있는데, Link안의 내용물을 터치하면 할당한 View가 있는 새로운 view로 이동하게된다. 아직 아무 view를 만들지 않았기 때문에 기능 테스트를 위해서 Text를 할당해보았다. 생성된 View의 함수를 실행해서 해당 View가 가지고있는 여러가지 효과들을 추가할 수 있는데 이 함수들은 항상 자기자신을 반환하기 때문에 인스턴스를 저장하지않고 여러 함수를 계속 호출할 수 있다.

Text("Hello world")
	.font(.title)
	.fontWeight(.heavy)
	.frame(height: 30)

여러 기능을 연속적으로 추가할 수 있지만 공유하는 수치가 있는경우 순서에 따라 모습이 달라지기도 한다.

 

Preview

swiftUI도 storyboard처럼 실시간으로 변경사항을 볼 수 있는 preview를 제공한다. .swift파일마다 하나씩 존재할 수 있는것으로 보이는데 이를 통해 직접 어플리케이션을 실행하지않고 현재 만들고있는 view의 모습을 볼 수있다.

아직 Text만 있는 list지만 앞으로 하나씩 만들면서 추가해보자.