SwiftUI 튜토리얼 2편 — 양방향 바인딩
지난 1편에 이어 이번에는 상호작용을 통한 양방향 바인딩에 대해 배워보겠습니다. 이번 튜토리얼에서는 회원가입 폼을 만들어보고 유저에게 입력받은 데이터를 직접 뷰에 출력해주겠습니다. 먼저 Xcode에서 SwiftUI 기반의 프로젝트를 하나 생성해주세요.
이름 입력받기
ContentView.swift 파일에서 최상단에 name이라는 변수를 사용하여 사용자에게 입력받을 변수명을 만들어줍니다.
먼저 변수로 사용하는 nam이 TextField에서는 $name 그리고 Text에서는 name으로 사용되었습니다. 조금 더 자세한 설명은 SwiftUI 튜토5편에서 확인하실 수 있습니다.
다음으로 사용자의 나이도 받아보겠습니다. 이름에는 일반적인 키보드를 보여주어도 상관없지만 나이는 숫자패드를 보여주어야 합니다. 하단과 같이 keyboardType 메서드를 통해 숫자패드를 띄워주겠습니다.
이제 나이와 이름이 함께 출력됩니다.
Navigation 추가하기
조금 더 복잡한 뷰를 구현하기 위해 NavigationView와 Picker를 구현하고 Section을 통해 제목을 달아주겠습니다. 전체 코드는 아래와 같습니다.
Segment Picker를 구현하기위해 NavigationView를 구현하고 나이를 입력하는 부분을 제거하였습니다. SwiftUI의 코드들이 상당히 직관적이어서 사실 주석이 필요 없을 만큼 가독성이 아주 좋았습니다. (갑자기 Constaint 지옥이 생각납니다…)😢😢😢
다음으로 Picker를 구현하고 반복문을 사용하여 1900년에서 2018년까지 출력해줍니다. 이제 출생 연도를 누르게 되면 하단과 같은 Segment형식의 Picker를 볼 수 있습니다.
성별추가하기
사용자로부터 입력받은 이름, 출생 연도, 성별 정보를 각각 변수 name, gender, bornIn에 할당하였습니다. 이제 입력받은 데이터를 기반으로 결괏값을 출력해보겠습니다.
결과스크립트 작성하기
마지막으로 resultScript 변수를 추가하고 하단 결과 Section을 추가합니다. 이름을 입력하고 나면 데이터가 바뀔 때마다 view가 자동으로 렌더링 되게 됩니다.
이상으로 양방향 바인딩에대한 내용을 마치고 다음편에는 Stack을 다루어보겠습니다.
