본문 바로가기
💻 Development/SwiftUI

[SwiftUI] 0922-25 우당탕탕 Scrumdinger 만들기 - Passing data with bindings

by Claudia 끌라우 2023. 9. 26.
반응형

* 공부했던 내용을 주관적으로 해석하여 '제가' 이해하기 쉽도록 작성하였습니다. 잘못된 정보가 있을 시 알려주시면 제게 큰 힘이 됩니다!


[ Passing data with bindings ]

< Section 3 Pass the edit view a binding to data >

유저가 스크럼의 테마를 직접 지정할 수 있도록 테마뷰를 컴포넌트로 만들고 연결을 하는 작업했음

->  이제 이걸 바인딩을 통해 데이터를 연결시켜주는 작업을 할 예정

 


Detail screen은 Edit screen에서 만든 변화에 대한 반응이 필요하다.

그래서 Detail screen는 Edit screen와 Source of truth 공유가 필요한 상황임!

-> Edit screen의 State property를 Detail screen에 바인딩을 걸어주고 Detail screen으로부터의 SOT를 제공해줘야한다


값이 바뀌어야 하는 순간에 바인딩을 걸어온걸 뿌려야하는 순간에 받아온다

https://youtu.be/TqciMEYmHmY?si=7IMFxErLDFofwvvS

 

@State -> 뷰가 변할 때 마다 다시 그려져야 하는 녀석들

Binding을 하기 위해서는 앞에 $를 붙이면 된다.

 

State 가 변하면서 Binding변수에 대한 값을 쥐고 있다.

State의 변수의 상태를 Binding이란 녀석이 계속 붙잡아주고 있는 역할을 한다.

다시 말해, 어떤 변수가 변해서 다시 그려져야 할 때 다시 그리는 시점을 어떻게 인지해야 할까?

State 변수가 바뀌엇을때 다시 그려야지 하면서 인지를 하면서도 바뀌면 안되는게 존재한다. 

예를 들어 토글

초기값이 False인데 토글을 눌러 true로 바뀌었으면 이 상태가 바뀐채로 남아있어야 한다. -> Binding 을 이용해서 붙잡아줌!

 

 


< Section 4 Pass a binding into the detail view >

스크럼의 목록이 보여지는뷰에서는 사용자가 편집 화면에서 개별 스크럼에 대한 변경 사항이 있을시 반영되어야 한다.

이 데이터 흐름을 위해, 뷰 계층 구조 아래로 또 다른 바인딩을 전달해야 한다.
스크럼 속성을 상수에서 바인딩으로 바꾼 다음, 스크럼 배열의 개별 항목에서 세부 보기로 바인딩을 만들었다.

 

바인딩을 걸어서 데려온 DailyScrum이 필요한 부분에 바인딩($)을 걸어주는 작업을 진행했다.

- 처음에는 어디에 어떻게 걸어야 할지 헷갈렸는데 연습을 더 해봐야할 듯


< Section 5 Pass a binding into the list view >

ScrumdingerApp의 앱의 시작점을 정의해주는 단계이다.

이 단계를 통해 ScrumdingerApp에 @State 속성을 추가하여 앱 데이터에 대한 Source of trurth을 만들었다.

이 후 SOT를 바인딩을 통해 계층 아래로 전달전달 해주는 역할을 만들어 주었다.


 

 

@State를 사용하여 Source of truth를 만들고, @Binding을 사용하여 다른 뷰와 상태에 변경에 대한 업데이트를 연결해주었다.

짜잔 이제 편집하면 앞에 뷰에서도 바뀐당 히히

 

바인딩에 대한 이해가 조금 까다로워서 오래걸렸다.

그래도 자주 쓰일 개념이니 연습을 많이 해두자

 


헷갈렸던 개념이니 만큼 문제도 남겨두기~~



 

반응형

댓글