XLOG

1. Observation 이란?wwdc 23 에서 발표한 observation 은 프로퍼티의 변화를 추적하는 Swift 기능으로 같은 wwdc 23 에 발표한 swift 5.9에 신기능인 매크로를 사용하여 정의한 데이터 타입을 observable 하게 바꿔주는 기능이다.2. 사용방법정의한 class 에 @observable property wrapper 를 붙여준다.import Foundationimport Observation@Observable class DataModel { var count: Int = 0}이를 View 에서 사용할 땐 @State, @Environment, @Bindable, var 를 사할 수 있다. 여기서의 기준은View의 부분일 경우 @State, 글로벌하게 변수를 사용할..

1. SwiftUI 는 언제 View를 Update 하는가?우리가 SwiftUI 를 사용하며 View 를 정의할 때 @State, @StateObject 와 같은 변수를 정의하게 되면 View 는 Source of truth 를 만들어 관리를 한다. 이때 UI 를 통해 Action 을 발생시켜 Source of truth 의 값의 변화를 준다면 그 값의 변화를 View 에 알리고 View에서는 body 를 다시 compute 를 한다. body를 다시 compute 한다는 것은 body 내부에 코드를 한줄한줄 실행을 해준다는 의미이다.2. 그렇다면 어떻게 Update 를 최소화 하는가?2-1. SubView를 사용하여 View가 의존하는 변수를 최적화한다.위에서 설명을 했지만, View 가 추적하고 있는..

1. StateSingle source of truth 로 View 에서 PropertyWrapper 로 정의 한다. 그로 인해 View 와 따로 독립적으로 SwiftUI 가 데이터를 관리해 주며 생명 주기는 View 의 생명주기와 동일하다. State 값의 변화를 view에 알려주면 View 는 re-render 한다.단 해당 State 가 정의된 View 의 body 내부에 직접적으로 state 값을 활용하여 View 의 내용이 달라지는 요소가 없다면 re-render 하지 않는다.import SwiftUIstruct ParentView: View { @State var count: Int = 0 var body: some View { VStack { ..

1. Environment 란 무엇인가?property wrapper 로 view의 environmentValue 를 읽는데 사용할 수 있다. 그렇다면 EnvironmentValues 는 무엇일까?view 계층을 통해 값을 전달해주는 역할을 한다. 이는 preferenceValue 와 반대되는 개념이다.2. 사용 방법// 정의struct MyEnvironmentKey: EnvironmentKey { static var defaultValue: Bool = false}extension EnvironmentValues { var myEnvironmentValue: Bool { get { self[MyEnvironmentKey.self] } set { self[MyEnvir..

친한 개발자와 얘기를 하다가 밀리의 서재에서 책을 클릭했을 때 나오는 Animation 얘기가 나와서 어떻게 구현했을까 고민을 하다가 SwiftUI 로 구현해봐야 겠다 생각해서 시작한 일이다. 1. 문제점기존에 Namespace 를 사용할 경우 기존 view 가 없어져야함, 하지만 위에 화면을 보게되면 기존 ScrollView는 항상 있어야 함Scroll 에 따라서 해당 View 가 가지고 있는 크기 및 위치값인 CGRect 를 Update 를 해주기 위해선 PreferenceKey 를 사용해야 하는데 PreferenceKey 의 경우 하위 View 에서 상위 View의 값을 전달할 때 사용하는 것인데, FullScreenCover 는 CellView 의 상위뷰가 아님present 할 때와 dismiss..

SwiftUI 의 경우 기본 Sheet, FullScreenCover를 제공한다. 하지만 이 경우는 Sheet 의 크기가 정해져 있다.하지만 일을 하며 디자이너가 Content 의 사이즈에 맞는 Sheet 를 원했다. 그를 위해 안에 들어가는 Content 의 사이즈를 확인하여 동적으로 Sheet의 크기를 결정할 수 있는 CustomSheet 를 만들어야 겠다고 생각했다.이 때 필요한 것은 CustomSheet 내부 Content 의 사이즈를 알 필요가 있었다.그것을 위해 이전 SwiftUI Scroll value를 확인할 때 사용했던 PreferenceKey 를 사용하기로 했다.struct CalculateSize: PreferenceKey { static var defaultValue: CGSi..

기존 UIKit의 UIButton 의 경우 setTitleColor 를 통해 highlighted에 따라 색상을 변경할 수 있었다. 하지만 SwiftUI 에선 자동으로 Button에서 처리가 되기도 하지만 Custom Label의 경우는 그것이 쉽지 않다. 방법은 간단하다. ButtonStyle 을 구현하는 것이다. ButtonStyle 은 Protocol 로 Makebody 함수를 통해서 View 를 return 한다. 또한 makebody에 configuration 에는 label, isPressed 가 있다. 여기서 isPressed 가 바로 highlighted 와 비슷하다고 보면 된다. 구현은 간단하다. struct CustomButtonStyle: ButtonStyle { func makeBo..

오랜만에 포스팅이다. 두 가지 버전으로 InfinityCarousel 을 구현해볼 예정이다. 그 전에 알아야 할 것은 두가지 버전에 기본 원리는 똑같다. 만약 4가지의 ImageView를 돌리려고 가정을 해보자. let colors: [Color] = [.red, .green, .blue, .yellow] @State var currentIndex: Int = 0 GeometryReader { reader in let width = reader.size.width TabView(selection: $currentIndex) { ForEach(colors, id: \.self) { color in Rectangle() .fill(color) .frame(width: width) } } } 이런식으로 보통 ..

저번 Animation 공부한 내용을 바탕으로 Camera Shutter 를 구현해 보았다. 우선 카메라 셔터 부터 시작을 해보자. struct ContentView: View { @State var buttonTapped: Bool = false var body: some View { ZStack { Color.black ZStack { // 외각 테두리 Circle() .stroke(lineWidth: 4) .foregroundColor(.white) // 내부 원 Circle() .foregroundColor(buttonColor) .frame(width: buttonTapped ? 56 : 60, height: buttonTapped ? 56 : 60) } .frame(width: 72, heig..

기본적으로 SwiftUI 에 애니메이션을 적용하기 위해 .animation(_:value:) 를 사용하거나 withAnimation() 을 사용했다. 1. 둘의 차이 우선 이 둘의 차이에 대해 먼저 확인을 해보자. animation(_:value:) 는? 먼저 .animation() 이다. 인스턴스 메소드로 some View 를 리턴한다. view를 리턴한다는 것은 viewModifier 로 생각하면 되는 것 같다. 변화를 추적할 값 V 의 변화를 감지, 그로 인해 영향을 받는 변수들을 animation 옵션에 따라 state 의 변화를 주어 해당 View에 애니메이션을 적용한다. 그렇다면 withAnimation은 ? withAnimation은 함수이다. 결과값을 Return 한다. 즉 결과값을 리턴을..