🐥 @State가 뭔가요? (공식문서+)

[luminouxx]

Overview

➡️ 공식문서 링크

• @State
• @Binding

---

🧠 SwiftUI의 '@State' 란?

SwiftUI에서 @State 는 뷰 내부의 데이터 상태를 저장하고 관리하는 속성 래퍼(Property Wrapper) 입니다.
간단히 말해, 화면에 표시되는 값이 바뀔 때 자동으로 화면(UI)을 업데이트해주는 역할을 합니다.

✨ 언제 @State 를 사용할까?

• 버튼을 누르면 색상이 바뀌거나
• 토글 스위치를 켜면 상태가 바뀌거나
• 입력값에 따라 UI가 실시간으로 반응할 때

---

📝 예제

1. @State 를 썼을 때 → ✔️ 잘 작동함

import SwiftUI

struct WithStateExample: View {
    @State private var boxColor: Color = .blue  // @State 변수로 선언했기 때문에 UI가 반응함
    
    var body: some View {
        VStack(spacing: 20) {
            Rectangle()
                .fill(boxColor)
                .frame(width: 200, height: 150)
                .cornerRadius(10)

            Button("빨간색으로 바꾸기") {
                boxColor = .red  // 값이 바뀌면 화면도 자동으로 업데이트됨
            }
        }
    }
}

2. @State 를 안 썼을 때 → ❌ 컴파일 에러

import SwiftUI

struct WithoutStateExample: View {
    private var boxColor: Color = .blue  // ❌ 그냥 일반 변수임
    
    var body: some View {
        VStack(spacing: 20) {
            Rectangle()
                .fill(boxColor)
                .frame(width: 200, height: 150)
                .cornerRadius(10)

            Button("빨간색으로 바꾸기") {
                // boxColor = .red ← 컴파일 에러가 생길 것임.
            }
        }
    }
}

---

⁉️ 왜 그럴까요?

"다시 그린다."

SwiftUI는 앱 화면을 만드는 도구지만, "이미 그려져 있는 뷰에서" 단순히 "버튼 하나 추가", "텍스트만 바꾸기"처럼 동작하진 않아요.

SwiftUI는 화면이 바뀌어야 할 때마다 "전체(혹은 부분) 화면을 다시 그리는 방식" 으로 작동합니다.
(정확히는, 다시 조립해서 보여주는 방식이에요.)

'@State' 를 붙히지 않는다면?

private var boxColor = Color.blue

이런 일반 변수는 그림을 그릴 때 "한 번만" 사용되고
그 이후에는 SwiftUI가 “이건 고정값이구나” 라고 생각해요. (바꿀 수 없음 이미 그렸거든)

"이미 그려진 그림의 색을 바꿀 수 있을까요?"

안타깝게도 SwiftUI는 이를 허용하지 않습니다.
그래서 에러가 발생해요. (이미 그려진 그림의 색을 왜 바꾸려 해!)

우리는 그림의 색을 바꿔줘 -> 색을 바꿔야 하는데,,, 그냥 다시 그려줄 수 있을까...?

우리는 위와 같은 방식이 필요하고, 이때 사용하는 것이 @State 입니다!

'@State' 의 역할

@State private var boxColor = Color.blue

이렇게 @State를 붙이면 SwiftUI는 이렇게 생각합니다:

“이 값은 변할 수도 있겠군!”
“그럼 내가 계속 지켜보고 있다가, 값이 바뀌면 다시 그려줄게!”

그래서 버튼을 눌러 색이 바뀌면?

“오! 색이 바뀌었네? 전체 (혹은 부분의) UI 다시 그려야지!”

이게 바로 “다시 그린다”는 개념이에요.

🧑🏻‍💻 개발자의 언어 ver. (몰라도 됨)

1. SwiftUI의 View는 struct로 되어 있음. 즉, 값 타입(Value Type)

• 자체적인 상태를 가질 수가 없음.
• 매번 새로운 인스턴스를 생성 .
• View는 사용될 때마다 재생성됨. (body 함수 호출, body는 화면을 그리는 함수(알고리즘))

2. 일반 var는 상태(state)가 아님.

• struct는 상태를 직접 저장할 수 없기 때문에, SwiftUI는 @State 를 별도로 메모리에 저장하고 참조.
• 상태 값이 바뀌면 SwiftUI가 뷰를 다시 그려야 함을 시스템에 알림 → body 재계산 → 화면 갱신

✏️ Summary

📌 일반 변수 vs @State 비교

항목	일반 var	@State
변화를 감지?	❌ 감지 못함	✅ 감지하고 자동으로 View 재렌더링
UI 반영됨?	❌ UI와 무관 (렌더링 트리거 X)	✅ 값 바꾸면 UI에 즉시 반영됨

[YooGyeongMo]

루미 도큐먼트 쓰시느라 정말 고생많았어요. 항상 궁금했던건데 고마워용 ! 🫡

[m1nbol]

루미 최고! 감사합니다 ☺️

[luminouxx]

감사합니다😊
이 글의 난이도는 어떤가요!?

[bisor0627]

감사합니다!! 호로록 잘 읽혀요!! 🥹

[gaoningmomo]

어떨 때는 State가 있고, 어떨 떄는 없어서 궁금했었는데,이제 조금 알 것 같아요.
감사합니다!!

[0tak2]

좋은 글 감사합니다! 이런 실험을 해보았어요~

import SwiftUI

struct ContentView: View {
    @State var count = 0 {
        didSet {
            print("b. count did set: \(count)")
        }
    }
    
    init() {
        print("a. CounterView init")
    }
    
    var body: some View {
        print("c. body computed. \(count)\n")
        
        return VStack {
            Text("\(count)")
                .font(.largeTitle)
            
            HStack {
                Button {
                    count -= 1
                } label: {
                    Image(systemName: "minus")
                }
                
                Button {
                    count += 1
                } label: {
                    Image(systemName: "plus")
                }
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

2025-04-26.10.42.18.mov

설명대로 동작하는 걸 볼 수 있었습니다!!

[luminouxx]

영상으로 보니, 이해가 잘 되네요! 감사해요 밥 😊