[Swift-TIL] 리스트의 추가 및 삭제 (State&Binding) (실습편)

이론편에 이어서 실습편이다.

https://stayjun.tistory.com/234

[Swift-TIL] 리스트의 추가 및 삭제 (State&Binding) (이론편)

실습편을 보기전 이론편을

보고 오길 추천한다.

 

이전에 작업했던 리스트 파일이다.

이제 리스트에 Add와 삭제를 한번

해보겠다.

 

먼저 리스트 위에 VStack을 그리고

그안에 HStack을 그리고

텍스트 필드를 입력하면,

바인딩이 보인다.

 

바인딩, 어떻게 만드는가?

State 변수 변수이름 : 타입

이후

State 변수에 달러를 넣고

변수명을 넣어주면 된다.

이렇게 바인딩이 이루어진다.

시뮬에서는 이런식으로 보인다.

 

음... 패딩도 넣어주고,

버튼도 넣어줘야 할 것 같다.

음~ 화면은 이렇게 그리는구나 싶었다.

버튼에 색상도 바꿔보겠다.

이렇게 해보았고,

이제 과일이름을 넣었을 때

버튼에서 입력을 해서

데이터를 넣어 줘야 하는데,

이게 그렇게 까지 어렵지 않다.

favoriteFruit 안에

넣어주기만 하면 되는거다.

그러면 무엇을 넣는가?

이 버튼을 눌렀을 때

그 순간에 새로운 fruit을

넣어줘야하니까.

편의상 어떤 값을 입력 하던

사과와 1000원의 값을 받게 했는데

이러한 오류가 난다.

이 오류는 얘가 변할 수 없다고

이야기하고 있다.

 

상태를 알려달라는 거겠죠?

이런식으로 @State로 상태를 알려주면

@State var favoriteFruit

얘가 변하면 화면을 다시 그려주는거다.

이 리스트들이 바뀌면

이 시뮬레이터들도

다시 그려져야 하겠다.

이런식으로 State변수에

append를 해주고

이름은 내가 입력한 과일이름

matchFruit 얘들도 다 입력을

받아야하는데, 일단 하나만 해보면,

내가 좋아하는 멜론을 입력을 해보면,

오.. 된다...

이렇게 추가하는건 어렵지 않는데,

이게 어렵다고 느껴질 수 있는 이유는

 

@State 변수와 바인딩에 대한

기본적인 개념이 없기 때문이다.

텍스트 필드에서

이렇게 입력을 받으면

얘가 변하면서

동시에 

이 텍스트 필드 안에 있는 녀석들이

바뀌면서 나의 과일이름들이

요것들이 변하기를 기대하기 때문에

얘와 입력받을 텍스트를

바인딩으로 연결을 해주는거다.

 

"그러면 삭제는 어떻게 하는가?"

 

삭제는 생각보다 심플하다.

ForEach에서 onDelete

onDelete를 선택해주는데,

원래는 IndexSet 이라는게 있는데

이와같은 형식의 코드다.

저 IndexSet을 option을 누르고

왼쪽 클릭을하면

상세하게 알 수 있다.

 

그러면 이상태에서

지우는 걸 만들어 보겠다.

음... IndexSet...

IndexSet이 필요한데,

onDelete에서 받은 fom과 비슷하다.

 

ForEach문에서 받았는데,

onDelete에서 받은 IndexSet을

IndexSet에 넣어주는거다.

 

어떻게 지우는가?

그렇다 이거는 리스트에서

기본으로 제공해주는거다.

 

그렇기 때문에 굳이

구현하지 않아도 된다는 것이다.

 

물론 onDelete가 없었다면..

구현 해야할 게 너무 많았을 꺼다.

 

그럼 무엇을 구현해야하는가?

위 처럼 스와이프를 했을 때

빨간색으로 delete가 나오는데,

그 화면조차도 내가 만들지 않았다.

 

이 스와이프 애니메이션도

디텍팅을 해야하고,

제스처를 디텍팅 하고

제스처가 디텍팅 되었을 때

저러한 빨간 버튼이 나오도록 해야한다.

심지어 누르면 지워진다.

 

앱을 조금 써본 분들은

누구나 아는 기본적인 UX일거다.

이와 같은 UX는 많은 앱에서

많은 비중을 차지하고 있을 꺼다.

그리고 그걸 이용해본거다.

 

그렇기 때문에 화면에 UI를 따로

그릴 필요성조차 없는거다.

 

그리고 각 리스트마다

0, 1, 2, 3, 4

각 몇번째가 눌렸는지도

IndexSet에 들어가게 된다.

그러면 Delete버튼이 눌렸을 때

몇번째가 눌렸는지 보내주고

 

그러면 내가 가지고 있는

favoriteFruit이라는 데이터에서

remove를 하는것이다.

remove를 하는데 필요한 건

atOffsets

IndexSet을 입력을 하면,

그 IndexSet에 맞는 데이터를

지워주는 것을 Array가 기본적으로

지원을 해준다.

 

그냥 at: Int도 있는데,

여기서 Int를 0으로 입력하면,

3번째 4번째 리스트를 지워도

항상 첫번째가 지워진다.

 

이런식으로 Delete버튼이 눌렸을 때

IndexSet이 눌렸다의 위치값을 보여주고

자연스레 연계하여

Array에서 지울 때 Index가

건들여지면 지우는거다.

 

이게 굉장히 안전한 방법이다.

 

오류가 나는 상황

이렇게 했을 때

7번째가 현재 없는 상황인데,

지우게 되면,

이와 같은 오류가 난다.

없는곳을 지웠기 때문에 죽는거다.

그렇기 때문에 

이렇게 하는게 가장

편하고 깔끔히 추가 및 삭제를

단 두줄만에 할 수 있는것이다.

이렇게 State와 Binding을

잘 이해하면 기존에 제공되는 기능을

이해하는데 크게 어렵지 않고

이를 이용해서 즐겁고 편하게

코딩을 할 수 있다.