@State, @Binding을 이용해 값 동적으로 할당하기

[EunHee-Jeong]

@State, @binding을 이용해 값 동적으로 할당하기

구성할 화면

• 문구, 색깔, 이모디콘 피커뷰에서 속성들을 고르면 → 다른 뷰에 표시

1. Picker에서 사용할 값들을 열거형으로 정의한다.

enum Mood: String {
    case happy = "😀"
    case sad = "😭"
    case  upsideDown = "🙃"
    case ghost = "👻"
}

2. 상태를 감지할 속성들을 ContentView에 추가해준다.

• 프로퍼티 래퍼 @State 를 앞에 붙여준다.

@State var name: String = "Hello"
@State var favoriteColor: Color = .blue
@State var mood: Mood = Mood.happy

• 뷰 객체에 연결해 사용할 때는 $ 를 붙여주면 된다.

  StatusControl(name: $name, favoriteColor: $favoriteColor, mood: $mood)

  • 아래에서 다시 설명할 것임 !

3. 각각의 뷰 객체들을 만들어준다. (분리하기)

• 피커 속성을 넣을 뷰 (= 컨트롤)

  struct StatusControl: View {
      // ✅ 동적으로 값을 받아오기 위한 @Binding 어노테이션
      @Binding var name: String
      @Binding var favoriteColor: Color
      @Binding var mood: Mood
      
      var body: some View {
          HStack {
              TextField("Name", text: $name)
              ColorPicker("Favorite Color", selection: $favoriteColor)
              Picker("Mood", selection: $mood) {
                  Text(Mood.happy.rawValue).tag(Mood.happy)
                  Text(Mood.happy.rawValue).tag(Mood.happy)
                  Text(Mood.happy.rawValue).tag(Mood.happy)
                  Text(Mood.happy.rawValue).tag(Mood.happy)
              }
              .pickerStyle(SegmentedPickerStyle())
          }.padding()
      }
  }

• 컨트롤로부터 입력 받은 값을 표시할 뷰

  struct StatusIcon: View {
      let name: String
      let favoriteColor: Color
      let mood: Mood
      
      var body: some View {
          VStack {
              VStack {
                  Text(mood.rawValue)
                  Text(name)
                      .foregroundColor(.white)
              }
              .font(.largeTitle)
              .padding()
              .background(favoriteColor)
              .cornerRadius(12)
          }.padding()
      }
  }

4. 생성한 각각의 객체들을 ContentView의 body에 추가

var body: some View {
        VStack {
            // ✅ @Binding 값과 @State 값을 연결
            StatusControl(name: $name, favoriteColor: $favoriteColor, mood: $mood)
            StatusIcon(name: name, favoriteColor: favoriteColor, mood: mood)
        }
    }

---

전체 코드

• EunHee-Jeong/iOS-Labs@d393287