task(id: ) 언제 사용하면 좋을까?

 

문제 상황

팔로우 팔로잉 기능을 구현할때였다.

저번과 같은 구독하기가 반영이 안되는 이슈이다. 하지만 상황이 조금 다르다..!

 

저번 이슈의 원인은

onAppear와 onDisappear의 잘못된 호출 순서로 구독하기 버튼을 눌렀을때, 뷰를 나갔다 들어오면 반영이 되지 않았던 것이었는데

이번에는 비슷한 상황이지만 조금 다른 경우였다.

 

 

이번 이슈의 원인은 ForEach 였다. 문제는 아니지만 ,, 문제가 되는 코드를 한번 보면

// 1번 코드 
ForEach(0..<searchedUser.count ,id: \.self) { i in
                                NavigationLink {
                                    UserDetailView(userVM: userVM, magazineVM: magazineVM, user: searchedUser[i])
                                } label: { ...

 

위의 코드에서 searchedUser가 어디서 나온거냐 하면

 

검색 뷰에서 유저를 검색하면 다음과 같이 검색된 유저들이 searchedUser 배열에 저장되게 된다.

 

// 2번 코드 
var searchedUser: [UserDocument] {
        var arr = userVM.users.filter {
            ignoreSpaces(in: $0.fields.nickName.stringValue)
                .localizedCaseInsensitiveContains(ignoreSpaces(in: self.searchWord)) ||
            ignoreSpaces(in: $0.fields.introduce.stringValue)
                .localizedCaseInsensitiveContains(ignoreSpaces(in: self.searchWord))
        }
        return Array(arr)
    }

 

근데 이게 왜 문제가 될까 ?

 

위의 코드처럼 UserDetailViewd에 데이터를 넘겨주고

UserDetailView로 뷰가 넘어갔을때, 구독하기 버튼을 누르면

// 3번 코드 
userVM.updateCurrentUserArray(type: "following", arr: currentUserFollowing, docID: currentUser.id.stringValue)
                                                    
                                                    userVM.updateCurrentUserArray(type: "follower", arr: magazineUserFollower, docID: userData.fields.id.stringValue)

이와 같이 userVM의 updateCurrentUserArray를 통해 userVM 의 @Published 변수가 업데이트 되면서 뷰가 새로 그려지게 된다.

 

 

밑의 코드는 구독자 수를 보여주는 Text 이다. 이부분에서 user가 업데이트가 되고 있지 않았다.

// 4번 코드 
Text("\(user.fields.follower.arrayValue.values.count == 1 ? 0 : userData.fields.follower.arrayValue.values.count-1)")

 

분명 userVM이 업데이트 되었는데 왜 반영이 안되고 있는것일까?

 

user는 아까 1번 코드에서 user 파라미터에 넘겨준 searchedUser[i]는 userVM에서 파생되어 나온 친구인데…

useVM 이 업데이트 되면 user도 함께 update 되어야 하는것아닌가… ?

 

 

 

원인

저번 케이스와 무엇이 다를까 생각해보니

이번 케이스에서는 여러개의 데이터를 ForEach 를 사용해 리스트로 보여주고 거기서 디테일뷰로 넘어가고 있었습니다.

 

 

아하…!!!

 

1번 코드에 ForEach를 다시한번 살펴보니

ForEach(0..<searchedUser.count ,id: \.self)

searchedUser 가 뭐라구용? userVM의 users 프로퍼티에서 필터링을 거친 칭구입니다.

내가 구독하기를 누르면 userVM의 @Published users 프로퍼티가 업데이트되죠! 그럼 검색 결과 리스트뷰를 다시 그리게 되겠죠!

 

그런데 지금 현재 내가 구독하기를 누른 뷰에서는 user 가 그대로인 겁니다 ㅠㅠ

 

왜냐하면..! 

ForEach는 리스트뷰를 아예 새롭게 그리기 때문이죠!

그래서 기존에 생긴 userDetailView는 그대로 업데이트가 되지 않은 상태로 남겨지고,,

ForEach로 새로운 뷰들을 다시 업데이트 해서 만드는 것입니다..😳

그래서 userVM가 업데이트가 되어도, userDetailView에서 4번코드의 user는 업데이트가 되지 않은 상황이었던 것이었던 것입니다..🥹

 

 

그래서 어떻게 해줄꼬 하니 ,,

userVM 이 업데이트되면 ,, ForEach가 새로 돌아갈거고,,, 그럼 ㅠㅠ 어떻게 해야대… 😫

 

 

 

해결방법

현재 문제는 ForEach 가 새로 뷰를 만들면서 전에 생성된 userDetailView가  속된말로 나가리되어서

user가 업데이트가 안되기 때문에 유저의 업데이트된 팔로워 수 가 반영이 안되는 것입니다. 

 

그래서 생각한 로직은 지금 나가리된 userDetailView에서

userVM.users의 변경을 감지해서 user 값을 뷰 내에서 강제 업데이트 시켜주는겁니다. 

무슨 말인지 코드로 한번 보여드릴게요! 

 

 

먼저 제일 먼저 해결해야하는 친구.. user를 업데이트 시켜주어야합니다.

 

먼저 @State userData 라는 변수를 만들어줍니다.

let user: UserDocument
@State var userData: UserDocument?

 

그 다음 onAppear 메소드에서 파라미터로 받아온 user 변수를 userData 에 넣어줍니다.

.onAppear {
     self.userData = user
   }

 

그 다음 userViewModel 의 users 프로퍼티의 변경을 감지하기 위해 

대망의 task(id:) !!!!!! 라는 메서드를 사용합니다. 

 

task(id:)

먼저 task 메서드에 대해 설명드리자면

SwiftUI 에서 task(id:) 메서드는 비동기 작업을 처리하는데 사용되는 메서드인데요 !

이 메서드는 View 프로토콜의 일부이고, SwiftUI 뷰의 본문에 포함될 수 있습니다.

 

task(id:) 메서드는 파라미터로 전달된 작업을 실행하고, 작업이 완료되면 뷰의 업데이트를 트리거합니다!

task(id:) 메서드는 두 가지 파라미터를 받습니다.

첫 번째 파라미터는 작업을 정의하는 클로저이고, 두 번째 파라미터는 작업의 ID입니다. (작업의 ID는 작업이 실행될 때마다 변경되는 값입니다. )

이를 통해 SwiftUI가 작업의 진행 상태를 추적하고 변경을 감지할 수 있습니다.

 

예를 들어, 비동기로 데이터를 가져와서 뷰에 표시하는 경우 task(id:) 메서드를 사용할 수 있습니다.

작업이 완료되면 뷰가 업데이트되어 새로운 데이터가 표시됩니다 😋

 

 

이렇게 task(id:) 를 사용해서 userVM.users의 변화를 감지해서 새로운 userData를 업데이트 시켜주는겁니다. ! 

.task(id: userVM.users) {
            if let user = userVM.users.first(where: {
                $0.fields.id.stringValue == user.fields.id.stringValue
            }) {
                self.userData = user
            }
        }

이렇게 task(id: )를 사용해서 userVM.users 의 변경이 감지되면

업데이트 된 userVM의 users에서 새로 필터링을 거쳐 업데이트 된 유저 정보( user ) 를 userData 에 넣어주면 되는거죠!

 

 

userData는 @State 변수이기 때문에

userData가 업데이드 되는 동시에 구독자 수가 업데이트 된 유저의 팔로워 수를 반영해 보여주게 됩니다 !!!

Text("\(userData.fields.follower.arrayValue.values.count == 1 ? 0 : userData.fields.follower.arrayValue.values.count-1)")

 

새로 알게된 메서드

• task(id:) : 내가 알고싶은 프로퍼티의 변경을 감지해서 action을 수행하고 싶을때 주로 사용하면 아쥬 잘 사용할 것 같다.

 

느낀점

진짜 진짜 내가 겪었던 트러블 이슈중에 제일 모르겠고, 어려웠던 문제였다.

팔로워 수가 바로 반영안되는것이 큰 문제일까 ,, 생각해보았지만 성격상 안고치는거 절대안댐 무저건 고쳐야해 …..

다른 분이 작업하던 코드에서 기능 추가로 인해 토스받아 내가 새로 뚝딱뚝딱 만드려다보니 맘같지가 않았다 ..ㅎㅎ

하지만 이번 계기로 뒤에 있을 모든 문제들의 원인을 알고 해결할 수 있었답니다 🙂

이제 나는 모든 해결 할 수 있을거같음니다…. 홧팅

이렇게 해서 오늘도 해결 완료!!! 😎