Coordinator 모듈을 통해 UI 모듈간 순환참조 해결하기

Coordinator 모듈을 통해 UI 모듈간 순환참조 해결하기

 

 

모듈을 분리하면서 화면 이동에 대한 처리가 필요해짐.

기존 구조에서`UI` 모듈끼리 서로의 UI 및 기능이 필요한 경우 모듈간 순환참조가 발생할 수도 있음.

 

글의 순서

• 완성한 동작 영상
• 문제 상황
• 아이디어 스케치
• Coordinator 모듈 설계하기
• UI 모듈 영역 적용 및 사용
• App 모듈 영역 적용 및 사용
• PresentationView 자세히보기
• NavigationDestinationView 자세히보기

 

 

 

완성한 동작 영상

 

영상 재현경로 설명

• HomeUI (모듈)
• [present] MultiProfileUI (모듈)
• [navigation] > ProfileEditUI (모듈)

3개의 모듈이 화면전환이 정상적으로 동작함.

 

동작영상

 

 

문제 상황

예를 들어 

• 홈 > 통합검색 > 프로필
• 홈 > 프로필 > 통합검색

이런 경로가 존재한다면 통합검색 UI와 프로필 UI는 서로를 의존해야 함.

즉, 순함참조 문제가 발생할 수 있음.

 

따라서 모듈화 과정에서 화면을 이동할 수 있는 방법으로 Coordinator 모듈을 만들어서 관리하고자 함.

 

아이디어 스케치

Coordinator 모듈을 UI 모듈과 앱 모듈에서 의존하게 만들고 App에서 Coordinator를 구현하도록 설계

 

아이디어 스케치

 

 

 

Coordinator 모듈 설계하기

 

화면 전환에는 기본적으로 push 방식과 present 2개의 방식이 존재.

Coordinator 인터페이스를 프로토콜로 선언하고, 각 화면 전환 방식에 따라 이동할 수 있는 방법을 enum으로 지정

 

예시

 

화면전환 케이스

 

 

 

UI 모듈 영역 적용 및 사용

사용하는 UI 모듈에서 Coordinator모듈의 의존성을 추가한 후, 해당 UI모듈의 Builder 부분인 DependencyInject를 통해서 UI 모듈 주입하기.

 

HomeViewBuiler의 Dependencyinject 영역

 

 

사용하는 부분에서는 아래 코드처럼 사용할 수 있음.

 

 

 

App 모듈 영역 적용 및 사용

 

App모듈에서는 Coordinator를 구현할 것이기 때문에 해당 인터페이스(프로토콜)들을 채택함.

 

프로토콜 채택

 

 

이후 화면전환과 관련한 struct를 만든 후 presentation 및 detination에 따라 경로를 처리할 수 있도록 아래 코드처럼 세팅

화면전환 관리 구조체

 

 

이후 프로토콜에 의해 반드시 구현해야 하는 화면전환 메소드를 작성.

 

화면전환 코드 처리

 

 

 

실제 적용은 아래 사진의 코드처럼 적용할 수 있음.

 

적용 사례

 

 

PresentationView 자세히보기

present 방식으로 화면전환하는 코드를 구현하고 있음.

화면전환

 

 

home만 예시로 들자면 아래 사진처럼 구현되어 있음.

 

여기서 주목할 점은 MultiProfileBuilder에서도 체인 형식으로 presnet와 navigation을 처리할 수 있다는 것임.

 

주의할 점.

• present: binding을 하나의 값으로 관리하여 B > C로 이동해야 할 경우
  • 문제 상황: A > B > C로 진행되어야 하지만 B가 닫히고 C가 열리는 문제 발생
• navigation: present된 View보다 뒤에 navgiation이 동작할 수 있음.
  • 문제 상황: navigation의 다른 뷰에서 나타남.

 

예제 코드

 

NavigationDestintationView 자세히보기

 

구조는 present와 동일하게 되어있음.

다만, destination을 받아야 하기 때문에 함수로 구현되어 있음.

 

구현부

 

실제 구현체 예시