[SwiftUI] @State란 무엇일까?

안녕하세요! 피피아노입니다 🎵

 

이번 포스팅에서는 SwiftUI에서 사용하는 @State에 대해서 정말 간단하게 포스팅을 해보겠습니다. 

 

그럼 바로 시작할게요!

 

@State란?

애플 공식 문서를 먼저 살펴보면

'SwiftUI가 값을 관리하고 읽고 쓸 수 있는 속성 래퍼'

라고 나와 있습니다.

 

개요는 아래처럼 나와 있는데 해석해보면,

SwiftUI는 속성의 저장을 관리합니다. 값이 변경되면 SwiftUI는 값에 따라 뷰 계층 구조의 일부를 업데이트합니다. 상태의 기본 값에 액세스하려면 해당 속성을 사용합니다. 그러나 Swift를 사용하면 상태 인스턴스를 직접 참조하여 래핑된 값에 액세스할 수 있습니다. 위의 예에서는 속성을 직접 참조하여 상태 속성의 래핑된 값을 읽고 씁니다.

 

정리해보자면!

@State는 뷰의 상태를 관리하기 위한 속성 래퍼입니다. SwiftUI는 선언형 프레임워크로, 뷰가 상태에 따라 자동으로 업데이트되도록 설계되어 있습니다. @State는 뷰의 상태 변화를 감지하고, 상태가 변경될 때 해당 뷰를 자동으로 다시 그리도록 합니다.

 

이렇게만 보면 사실 이해하기 어려우니 제가 소스코드와 함께 보여드리겠습니다.

 

@State 사용 예시

자 우선 제가 이렇게 소스코드를 작성해보았습니다. 이 소스코드는 화면에 0이라고 나와 있는 숫자가 숫자 감소 버튼을 누르면 1씩 감소되고 숫자 증가라는 버튼을 누르면 1씩 증가되는 소스코드입니다. 

 

근데 소스를 살펴보면 13번째 줄에서 에러가 발생한 것을 볼 수 있습니다. 에러를 살펴보자면

 

Left side of mutating operator isn't mutable: 'self' is immutable

 

해석해보면

 

변경 연산자의 왼쪽이 변경 가능하지 않습니다:  'self'가 불변(immutable)임을 나타냅니다.

라는 의미로, 속성이나 값이 변경 불가능한 상태임을 나타내고 여기서 'self'는 현재 인스턴스를 가리키며, 이 인스턴스의 속성을 변경할 수 없다는 것을 의미합니다.

 

그럼 어떻게 해결하지??

 

이럴 때 사용해야 하는 것이 바로 @State입니다. 

 

@State의 특징

@State는 뷰의 로컬 상태를 관리해주는 프로퍼티입니다.

 

@State는 상태가 변경되면 해당 상태를 사용하는 모든 뷰를 자동으로 다시 그리게 해주는 프로퍼티라고 생각해주시면 됩니다!

정말 편한 프로퍼티죠!!

자 이렇게 var 앞에 @State를 붙여주면 에러 메세지도 사라지고 정상적으로 작동하게 됩니다. 

 

@State var count: Int = 0

위 코드에서 @State 속성 래퍼는 count 변수를 선언하는 데 사용되었습니다. count 변수는 @State로 선언되었기 때문에, 이 변수의 값이 변경될 때마다 SwiftUI는 자동으로 해당 뷰를 다시 그립니다.

 

• @State var count: Int = 0
  count 변수는 뷰의 상태를 나타내며, 초기 값은 0입니다.
  @State 속성 래퍼를 사용하여 이 변수를 선언함으로써, SwiftUI는 이 변수가 변경될 때마다 해당 뷰를 다시 그리게 됩니다.
• Text(count.formatted())
  count 변수를 사용하여 텍스트를 표시합니다. count가 변경되면 이 텍스트 뷰도 자동으로 업데이트됩니다.
  
  
• Button("숫자 감소") { count -= 1 }
  이 버튼을 누르면 count 값이 1 감소합니다. count가 변경되므로 SwiftUI는 뷰를 다시 렌더링합니다.
  
  
• Button("숫자 증가") { count += 1 }
  이 버튼을 누르면 count 값이 1 증가합니다. count가 변경되므로 SwiftUI는 뷰를 다시 렌더링합니다.

 

구체적인 역할

상태 변수 선언!!

@State는 count 변수를 상태 변수로 선언합니다. 이는 count가 뷰의 상태를 나타내며, 변경될 수 있음을 의미합니다.

Button 액션에서 count 변수가 변경될 때마다 SwiftUI는 자동으로 뷰를 다시 그립니다. 예를 들어, "숫자 감소" 버튼을 누르면 count가 1 감소하고, "숫자 증가" 버튼을 누르면 count가 1 증가합니다.

이때 Text(count.formatted()) 뷰는 count의 변경된 값을 반영하여 다시 렌더링됩니다.

 

요약

•  @State는 SwiftUI에서 뷰의 상태를 관리하고, 상태가 변경될 때 뷰를 자동으로 업데이트하는 역할
• 특징: 상태관리, 자동 업데이트

---

감사합니다.

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!