A-2. 의존의 방향은 단방향 — View가 Controller를 import하면?

이렇게 읽어보세요: 선배 크루의 고민 → 토론 질문을 먼저 읽고 → AS-IS 코드를 직접 분석 → 리뷰어의 피드백으로 관점 확인 → 탐색 미션에서 PR 깊이 파기

선배 크루의 고민

“1단계 domain을 그대로 두고 view만 교체한다는 방향으로 진행했는데, View에서 필요한 데이터를 가져오려다 보니 Controller를 import하게 되었습니다.” — 쿠마, PR #251

“컴포넌트가 사실상 컨트롤러 역할을 하고 있는 것 같아요. 이벤트 처리, 상태 관리, 렌더링이 한 곳에 모여 있어서 분리가 어렵습니다.” — 마루, PR #300

“웹 환경에서 이벤트 리스너 간 데이터를 전달하려면 어떻게 해야 할지 고민입니다. 결국 전역 상태나 DOM을 통해 공유하게 되는데 이게 맞는 건지 모르겠습니다.” — 다이앤, PR #384

이 코드를 보면서 이야기해봅시다

“이 View가 getTotalPrize()를 직접 호출하는 대신, 파라미터로 받는다면 코드가 어떻게 바뀔까요?”
“View가 Controller를 import하면, Controller를 수정할 때 View도 영향을 받습니다. 반대로 Controller가 View를 호출하는 구조라면 어떻게 달라질까요?”

AS-IS 코드

출처: PR #56 — 신세한탄 (2021, 2단계) · 해당 파일


// View/receiptView.js — View에서 Controller를 import하여 직접 호출하는 역방향 의존
import { getTotalPrize } from '../Controller/submitController.js';
 
const receiptView = {
  renderReceipt() {
    // View가 Controller의 함수를 직접 호출하여 데이터를 가져옴
    const totalPrize = getTotalPrize();
    // ... 렌더링 로직
  }
};

리뷰어의 피드백

“View 파일에서 Controller 파일을 import 하면 의존의 방향이 잘못된 것이라고 볼 수 있습니다.” — PR #56 (링크 )

“MVC 패턴에서 View와 Model은 Controller를 모릅니다. 따라서 View가 Controller의 기능에 의존하면 안되고 Controller로 부터 주입을 받아야 합니다. getTotalPrize를 직접 호출 하지 말고 필요한 값은 파라미터로 받아서 그리기만 해야 합니다.” — PR #56 (링크 )

“도메인 로직과 UI 로직이 강하게 결합되어 있는 것 같아요. step2에서 너무 많은 책임을 갖고 있는 것 같아요. Domain은 세부구현사항을 너무나 많이 알고 있어야하고” — PR #395 (링크 )