PassthroughSubject와 onReceive 메소드를 사용해서 나이스한 비동기처리하기

문제 상황

Combine 으로 비동기 처리를 하는 과정에서 문제가 발생함.

비동기 코드로 뷰모델에 있는 배열에 데이터를 저장한 후

그 배열을 출력을 해보니 빈배열이 출력되는 상황

 

홈뷰에서 데이터를 가져오는 작업을 하면서

onAppear 내에서 communityVM.fetchCommunity 라는 커뮤니티 게시물을 가져오는 비동기 코드를 실행하고

communityVM.communities (가져온 커뮤니티 게시물들) 를 출력해보니

.onAppear {
                print("onAppear 시작")
                communityVM.fetchCommunity() 
                print(communityVM.communities) // [] 출력
            }

 

결과는 ? “ [ ] “ 빈배열을 출력했다. 생각해보면 넘나 당연한 결과였다. ^^

 

원인

func fetchCommunity() {
        print("CommunityViewModel fetchCommunity Start")
        
        CommunityService.getCommunity()
            .receive(on: DispatchQueue.main)
            .sink { (completion: Subscribers.Completion<Error>) in
                print("MagazineViewModel fetchCommunity complete")
            } receiveValue: { (data: CommunityResponse) in
                self.communities = data.community
                self.fetchCommunitySuccess.send()
            }.store(in: &subscription)
    }

 

왜냐하면,

fetchCommunity 메소드가 일단 실행되면 밑에 코드에 .receive(on: ) 까지 실행이 되고,

.sink 로 넘어가기전에 print가 실행되기 때문에 그렇다.

 

즉, 비동기코드가 끝나기도 전에 print 가 실행되기 때문 !

 

아직 fetchCommunity 메소드에서 .sink 를 통해 받은 값을 communities 배열에 저장하지 않은 상태로 배열을 출력하다 보니

당연하게도 빈배열이 출력이 되었다.

 

그래서 이 문제를 해결하는 방법을 찾아본 결과,

 

 

1. 첫번째 방법은

너무나 당연하게도 receiveValue 를 받아서 저장한 후에 그 안에서 print 해주는 것이다.

 

func fetchCommunity() {
        print("CommunityViewModel fetchCommunity Start")
        
        CommunityService.getCommunity()
            .receive(on: DispatchQueue.main)
            .sink { (completion: Subscribers.Completion<Error>) in
                print("MagazineViewModel fetchCommunity complete")
            } receiveValue: { (data: CommunityResponse) in
                self.communities = data.community
                self.fetchCommunitySuccess.send()
                print(communityVM.communities) // 여기서 출력 
            }.store(in: &subscription)
    }

 

2. 두번째 방법은 

(우선 탈락이지만 ㅎㅎ)

 

일단 …! DispatchGroup 이라는걸 써보려 했지만

비동기를 끝내는 과정에서 group.leave 가 위의 코드처럼 sink 코드 내에 존재해야하므로 탈락했다.

 

아래 코드대로 실행하면 처음과 같은 결과를 내기 때문에 불가능하다.

 

.onAppear {
                print("onAppear 시작")
                // dispatch Group 탈락
                let group = DispatchGroup()
                group.enter() // 비동기 시작 등록
                communityVM.fetchCommunity()
                group.leave() // 비동기 끝
                print(communityVM.communities) // [] 출력
            }

 

 

3. 마지막 방법은 print를 fetchCommunity 의 .sink 블록 내에 선언하는 것 말고

.onAppear 에서 즉 바깥에서 선언할 수 있는 방법은 무엇일까 ? 고민해본 결과이다.

 

var fetchCommunitySuccess = PassthroughSubject<(), Never>()

 

PassthroughSubject ^^ 요걸 함 사용해보쟈 ! 

 

 

해결방법

먼저

var fetchCommunitySuccess = PassthroughSubject<[CommunityDTO], Never>()

 

이런식으로 [CommunityDTO] 요 데이터를 받아오겠다. 라고 선언해주고

 

func fetchCommunity() {
        print("CommunityViewModel fetchCommunity Start")
        
        CommunityService.getCommunity()
            .receive(on: DispatchQueue.main)
            .sink { (completion: Subscribers.Completion<Error>) in
                print("MagazineViewModel fetchCommunity complete")
            } receiveValue: { (data: CommunityResponse) in
                self.communities = data.community
                // 여기서 data.community를 send에 실어보내줌 
                self.fetchCommunitySuccess.send(data.community)
            }.store(in: &subscription)
    }

 

저런식으로 fetchCommunitySuccess 에 data를 실어보내주고

 

이걸 뷰에서

 

.onAppear {
                print("onAppear 시작")
                communityVM.fetchCommunity()
                print(communityVM.communities) 
            }
            .onReceive(communityVM.fetchCommunitySuccess) { newValue in
                print(newValue)

 

.onReceive 를 통해서 communityVM.fetchCommunitySuccess의 값을 받아와서 그 다음 print 해주는거다. !!

 

.onReceive 가 어떤 메소드냐면

 

 

view 에서 지정된 publisher 가 방출한 데이터들을 감지해서 작업을 수행하는 그런 메소드다.

 

구독할 publisher를 매개변수로 넣어주면, 그 publisher 가 데이터가 방출함을 감지했을때 action 에서 작업을 수행하는 고런 너낌

 

그래서 !

뷰모델의 fetch 메소드 내의 sink 블록에서 self.fetchCommunitySuccess.send(data.community) 로 데이터를 방출하면

.onReceive 메소드에서 감지하고 print 한다. 이 순서로 진행된다.

 

 

이렇게 해서 해결완료 ㅎㅎ

 

음 이게 이렇게까지 하지 않아도 데이터를 뿌려주는것은 아무 이상 없었지만

비동기처리 테스트하는 과정에서 비동기 코드 다음 코드는 어떻게 실행을 해야될까 라는 의문점 이 생겨서 ,,, ㅎㅎ😜

 

이 둘의 꿀조합은 나중에 다중 비동기 작업을 "동기적"으로 처리할 때 요긴하게 쓰일 예정이었다. 

To be continue.. 

 

새로 알게된 메서드

• onReceive : Subject Publisher에 값이 들어왔을때 onRecieve (말그대로 값을 받았을때) 더 디테일하게 우리 프로젝트에서는 네트워크 작업이 완료되고 데이터를 받아왔을때 액션을 수행해야할때 아쥬 잘 사용할 것 같다!!

 

느낀점

Combine의 Subject 라는 개념을 알고 있었지만

실제 프로젝트에서 어떤 상황에서 사용될까라는 궁금증이 있었다.

이번 이슈를 통해 PassthroughSubject 라는 Publisher 에

.send() 메소드를 사용해서 값을 밖에서 주입시켰을때, 즉 네트워킹 작업이 완료되었을때

뷰에서 onReceive 메소드를 통해 값의 변화를 감지해서 원하는 액션을 하는 방법을 알게 되었고

PassthroughSubject 에 대해 더 가까워진 기분이 들었다.

완전히 이해완!!! 😆