패키지 의존성을 뒤집어보자

박기완·2022년 1월 5일
0

라우터 패키지의 링크 컴포넌트는 로그인이 필요하거나 앱 전환이 필요할 때 모달을 띄우는 기능이 있다. 그래서 모달 패키지를 의존하고 있었다.

그런데 모달 패키지에서 라우터 패키지의 코드를 사용하고 싶어졌다. 로그인 모달에서 확인을 누르면 로그인 페이지로 이동하는데 이 부분을 라우터 패키지 코드로 대체하고 싶었다.
서로에게 의존하는 한 쌍이라니 감동적인 이야기지만 코드의 세계에선 성가신 문제다.

모달 패키지보다 라우터 패키지가 더 낮은 수준의 모듈이라고 생각했다. 왜냐하면 모달 패키지가 필요한 부분이 얼마든지 바뀔 수 있기 때문이다. 지금은 모달을 띄우지만 모달이 아닌 다른 UI를 표시하고 싶을 수도 있고, 그냥 어떤 코드를 바로 실행하고 싶을 수도 있다. 본질은 어떤 코드를 실행하는 것이지 모달이 아니었다.

그래서 라우터 패키지에서 모달 의존성을 제거하고 싶었다. 하지만 어떻게? 링크 컴포넌트를 사용할 때마다 모달을 호출하는 함수를 넘겨주고 싶지 않았다. 그러면 Context API를 사용해서 로그인이 필요할 때 실행하는 함수를 전달하면 되겠다! 링크 컴포넌트 바깥에서 자유롭게 액션을 조절할 수 있을 것이다.

한편, Context API의 특징 덕분에 확장이 쉽다. 기존 Provider 아래에 새로운 Provider를 마운트하면 행동을 덮어쓸 수 있다. 이를 이용하면 특정한 부분만 다른 행동을 하게 만드는 것도 가능하다.

0개의 댓글