TCA(5) : 부모-자식 간 이벤트 전달

안녕하세요.

 

이번에는 TCA를 활용하여 부모 Reducer와 자식 Reducer 간에 이벤트 전달하는 방법에 대해서 알아볼게요.

 

(TCA 0.54.0 기준으로 작성했으며, 전체 코드는 여기를 봐주세요!)

 

---

# 부모-자식 간 이벤트 전달하는 방법

부모 Reducer가 자식 Reducer에게 또는 자식 Reducer가 부모 Reducer에게 이벤트를 전달하는 방법은 개념만 알고 있으면 크게 어렵지 않습니다.

(물론 Notification을 쓰지 않구요!)

 

부모 Reducer에서 Scope를 사용해서 자식 Reducer를 정의한 것 기억하시나요??

[참고] Scope란?

Scope에 대해 정리한 글이 있으니 먼저 보고 오시면 쉽게 이해가 되실 거예요.

 

 

부모 Action 안에는 자식 Action도 포함되어 있어요.

 

그럼 부모 Reducer에서 자식의 Action을 직접 발생시킬 수도 있을 거예요.

 

그럼 부모가 발생시킨 자식 Action은 누가 받을까요??

 

자식이 받지!

 

즉, 부모가 자식 Action을 직접 발생시키고 자식이 그 Action을 받음으로써 부모가 자식한테 이벤트를 준 것이라고 볼 수 있겠네요??

[주의] Scope가 Reduce보다 위에 있어야 합니다.

만약 Scope가 Reduce보다 아래에 있으면, 부모가 발생시킨 자식 Action을 자식보다 부모가 먼저 받게 됩니다. 

 

 

이번엔 자식 관점에서 볼게요.

 

자식은 누가 부모인지 모르기 때문에, 조금 전처럼 부모의 Action을 직접 발생시킬 수는 없습니다.

 

하지만 Scope를 사용해서 부모-자식 관계가 형성되어 있기 때문에 자식 Action은 부모에게 전달됩니다.

 

즉, 자식 Action은 부모에게 전달되기 때문에 부모에서 전달된 자식 Action을 받음으로써 자식이 부모한테 이벤트를 준 것이라고 볼 수 있지 않을까요?ㅎㅎㅎ

 

설명드린 개념을 토대로 예시를 만들어볼게요.

 

 

# 예시

빵을 만드는 BakingMaching이란 제빵기(=자식)를 가지고 있는 Bakery라는 빵집(=부모)이 있다고 했을 때, 빵 만드는 버튼을 누르면 제빵기가 활성화되고 제빵기가 빵을 다 만들면 빵집에 빵을 추가해주는 간단한 앱을 만들어볼게요.

 

 

 

필요한 State와 Action을 정의한 Bakery, BakingMachine View와 Reducer는 제가 미리 만들어뒀어요ㅎㅎ

 

 

 

## 부모에서 자식으로 이벤트 전달

먼저, 부모가 자식한테 이벤트 전달하는 것부터 구현해 볼게요.

 

'빵 만들어랏' 이란 버튼이 눌렸을 때 Bakery는 BakingMachine한테 빵을 만들도록 시키기 위한 Action을 전달해 줘야 할 것 입니다.

 

Bakery Reducer의 Action 안에는 BakingMachine의 Action도 함께 포함되어 있는 것 보이시죠?

 

즉, Bakery Reducer에서 Bakery.Action.bakingMachine(.startBaking) Action을 발생시킬 수 있고, 그 Action은 자식인 BakingMachine이 받게 됩니다.

(Bakery -> BakingMachine으로 이벤트 전달!!!)

 

 

 

## 자식에서 부모로 이벤트 전달

다음으로, 자식이 부모한테 이벤트 전달하는 것을 구현해 볼게요.

 

'빵 다 만들었어욥' 이란 버튼이 눌렸을 때 BakingMachine은 Bakery한테 빵을 다 만들었다는 Action을 전달해 줘야 할 것 입니다.

 

하지만 BakingMachine Reducer는 Bakery Action이 뭔지 몰라요. 즉, 위 방법처럼 부모 Action을 직접 발생시킬 수 없다는 것이죠.

(자식인 BakingMachine 안에 있는 Action은 오로지 본인의 Action만 가지고 있기 때문입니다.)

 

이 경우엔, 자식 Action이 부모한테까지 포워딩되는 것을 활용해야 합니다.

 

빵을 다 만들었다는 것을 의미하는 BakingMachine.Action.finishBaking Action은 부모-자식 관계에 의해서 Bakery Reducer에게 전달됩니다.

 

Bakery Reducer에서 전달된 Action을 처리하는 동작을 switch 구문 안에 넣어주면 되겠네요!!

(BakeryMachine -> Bakery로 이벤트 전달!!!)

 

[참고] 부모 Reducer 안에서 switch 문 안에 default가 있는 이유

부모 Action 안에 자식 Action도 포함되어 있기 때문에, switch 문에서 자식 Action도 처리하지 않으면 컴파일 에러가 발생합니다.
부모 Reduce는 꼭 필요한 경우가 아니라면 자식의 Action을 전달받아서 뭔갈 해줄 필요가 없기 때문에 default로 switch 문 안에서 자식 Action을 생략한 것입니다.

 

 

실행시켜서 로그를 보면 Bakery -> BakingMachine, BakingMachine -> Bakery로 이벤트가 잘 전달된 것을 볼 수 있어요ㅎㅎ

 

 

 

 

# 요약

- 부모가 자식 Action을 직접 발생시켜서, 부모가 자식한테 이벤트를 전달 할 수 있다.
- 자식 Action이 부모에게까지 포워딩되는 것을 활용해 자식이 부모한테 이벤트를 전달할 수 있다.

 

---

이번 글은 여기서 마무리.