SwiftUI @AppStorage 심화편

@AppStorage 심화편으로 돌아왔습니다.

이번 차트에서는 @AppStorage를 사용하여 프로젝트를 만들어 볼테데요. 

 

기초편에서도 말했지만 간단히 짚고가지면  @AppStorage는 Int, String과 같은 원시타입만 저장할수 있어요

그래도 기억이 안난다 싶으면 블로그를 참고해보세요
https://yeomir.tistory.com/11

어서와(SwiftUi) AppStorage는 처음이지?

 

자 그럼 심화편 시작하겠습니다.

 

이 프로젝트를 만들어보겠습니다. 두둥탁!

 

// ContentView
struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        VStack {
            TextField("입력해주세요", text: $text)
                .padding()
                .textFieldStyle(.roundedBorder)
        }
    }
}

ContentView에 TextField를 생성해줍니다.

 

 

struct ContentView: View {
    @State private var text: String = ""
    var body: some View {
        VStack {
            TextField("입력해주세요", text: $text)
                .padding()
                .textFieldStyle(.roundedBorder)
            
            HStack(spacing: 20) {
                
                Button {
                    // 버튼을 눌렀을 때 텍스트 저장
                } label: {
                    Text("텍스트 저장")
                }
                
                // 디자인적 요소 ( 굳이 필요없다면 삭제해도 됨 )
                Rectangle()
                    .frame(width:1, height: 10)
                
              
                Button {
                    // 버튼을 눌렀을때 다음 페이지로 이동
                } label: {
                    Text("다음 페이지로")
                }
            }
        }
    }
}

직관적인 UI를 위해 버튼 부분을 꾸몄습니다...

 

 

1) 버튼을 눌렀을때 AppStorage에 저장하기

import SwiftUI

struct ContentView: View {
    @AppStorage("newText") var newText: String = ""
    @State private var text: String = ""
    var body: some View {
        VStack {
        
            Text("\(newText) 이 텍스트가 입력되었습니다.")

            TextField("입력해주세요", text: $text)
                .padding()
                .textFieldStyle(.roundedBorder)
            
            HStack(spacing: 20) {
                
                Button {
                    // 버튼을 눌렀을 때 텍스트 저장
                    newText = text
                } label: {
                    Text("텍스트 저장")
                }
                
                Rectangle()
                    .frame(width:1, height: 10)
                
              
                Button {
                    // 버튼을 눌렀을때 다음 페이지로 이동
                } label: {
                    Text("다음 페이지로")
                }
            }
        }
    }
}

AppStorage를 추가해줍니다. AppStorage는 key와 value값으로 이뤄진건 다 아시죠?!  화면에 보여주기 위해 Text(newText)가 추가되었습니다.

 

여기서 보너스!!  

현재 아무값도 입력되어있지 않은데, " "이 텍스트가 입력되었습니다 만 보이는데 입력이 저장 됐을때만 보여지게끔 하려면 어떻게 해야할까요???   

 

정답은... newText를 옵셔널 처리하면 됩니다.

옵셔널 newText

참 재밌죠? 자 그럼 이어서 진행해보겠습니다!

 

2) 다음페이지로 AppStorage값 넘기기 

페이지를 넘길때는 다양한 방법이 있습니다. NavigationView / Sheet / FullcoverSheet ... 그중에서도 오늘은 NavigationView를 활용하여 다음페이지로 넘겨보겠습니다.

import SwiftUI

struct ContentView: View {
    @AppStorage("newText") var newText: String?
    @State private var text: String = ""
    var body: some View {
        NavigationView {
            VStack {
                
                if let newText = newText {
                    Text("\(newText) 이 텍스트가 입력되었습니다.")
                }
              
                TextField("입력해주세요", text: $text)
                    .padding()
                    .textFieldStyle(.roundedBorder)
                
                HStack(spacing: 20) {
                    
                    Button {
                        // 버튼을 눌렀을 때 텍스트 저장
                        newText = text
                    } label: {
                        Text("텍스트 저장")
                    }
                    
                    Rectangle()
                        .frame(width:1, height: 10)
                    
                    NavigationLink {
                    // 버튼을 눌렀을때 다음 페이지로 이동
                        NextView()
                    } label: {
                            Text("다음 페이지로")
                        }
                    }
                }
            }
        }
    }
}

1. NextView를 만들어줍니다.

2. VStack을 NavigationView로 감싸주고,  버튼을 NavigationLink로 바꿔주면 끝! 참 쉽죠?

 

 

 

3) NextView에서 전 화면에서 AppStorage값을 적용하려면 어떻게 해야할까??  ....  @AppStorage를 똑같이 적으면 된다.

struct NextView: View {
    @AppStorage("newText") var newText: String?
    var body: some View {
        if let newText = newText {
            Text("\(newText) 여기는 두번째 페이지 입니다.")
        }
    }
}

어때요 참 쉽죠? 약간... 비슷한 느낌을 찾자면 @ObservedObject,  @EnvironmentObject 이런 느낌적인 느낌...

 

 

NextView 시뮬레이터

 

초기화 버튼을 추가해보자

struct NextView: View {
    @AppStorage("newText") var newText: String?
    var body: some View {
        VStack {
            if let newText = newText {
                Text("\(newText) 여기는 두번째 페이지 입니다.")
            }
            
            // 버튼 추가
            Button {
            	// 첫번째 방법
                newText = nil
                
                // 두번째 방법
              	UserDefaults.standard.set("", forKey: "name")

            } label: {
                Text("텍스트 초기화하기")
            }

        }
        
    }
}

 

 

이상으로 @AppStorage 심화편을 마치겠습니다.