[React] 아키텍쳐 설계 (feat. MVVM)

이 포스트에서 다룰 내용

1. 기존 아키텍쳐의 문제점
2. 해결점
3. 느낀점

Start

프로젝트의 크기(component, screen)가 점점 커짐에 따라, 아키텍쳐 설계 없이 만든 서비스는 점점 생산성과 효율성이 떨어졌다.

아마도 SignUpInput 컴포넌트를 회원가입에만 사용한다면, 크게 문제가 없을거라 생각한다. 하지만, 이 컴포넌트를 나는 로그인, 아이디 찾기, 비밀번호 찾기, 배송지 입력하기, 상품 주문시 개인정보 입력할때 쓸 예정이다. 생산성의 개념으로는 View Model을 복사해서 붙여넣으면 되겠지만, 수정을 할때를 생각해보니, 복사 붙여넣기 한 모든 컴포넌트에 들어가서 수정을 할 생각을 하니, 너무 효율적이지 않다고 생각했다.

Problem

1. 새로운 컴포넌트를 생성하는데도 customizing 하는 시간이 너무 오래걸렸다.
2. Input 하나를 수정하더라도, 시간이 너무 오래걸렸다.

초기 아키텍쳐에 대한 설계나 이해가 전혀 들어가지 않은 상태였다. 인터넷으로 react design pattern과 architecture을 좀 찾아본 결과, MVC, MVVM, MVP등의 구조를 찾을 수 있었는데, 현재 사이트의 구조는 Model - View , View Model이 섞인 구조였다. View와 View Model을 한 컴포넌트로 사용하다보니, 특정 view를 재사용 하는것과 찾는것이 힘들었던 것이다.

AS-IS

디렉토리 구조

component
  ㄴ SignUpHeader.js
  ㄴ SignUpStep1.js            --> View Model
    ㄴ SignUpInput1.js         --> View
    ㄴ SignUpInput2.js         --> View
    ㄴ SignUpInput3.js         --> View
    ㄴ SignUpInput4.js         --> View
    ㄴ SignUpButton.js         --> View
  ㄴ SignUpStep2.js            --> View Model
    ㄴ SignUpInput5.js         --> View
    ㄴ SignUpInput6.js         --> View
    ㄴ SignUpInput7.js         --> View
    ㄴ SignUpButton.js         --> View
  
Screen
  ㄴ SignUp.js
    ㄴ SignUpHeader.js
    ㄴ SignUpStep1.js
    ㄴ SignUpStep2.js
    
  ㄴ Login.js
    ㄴ LoginHeader.js
    ㄴ LoginInput1.js
    ㄴ LoginInput2.js
  

Solution

1. 현재 있는 View model과 View를 분리한다
2. 중복되는 View를 하나의 component로 만든다
3. View model에서 View를 import해서 사용한다.

To-Be

디렉토리 구조

component/
 ㄴ Auth/
  ㄴ AuthHeader.js
  ㄴ AuthInput.js        --> View
  ㄴ AuthButton.js
  
Screen/
  ㄴ SignUp.js           --> View Model
    ㄴ AuthHeader.js
    ㄴ AuthInput.js
    ㄴ AuthButton.js
  ㄴ Login.js            --> View Model
    ㄴ AuthHeader.js
    ㄴ AuthInput.js
    ㄴ AuthButton.js    
  ㄴ FindID.js           --> View Model
    ㄴ AuthHeader.js
    ㄴ AuthInput.js
    ㄴ AuthButton.js
  ㄴ FindPW.js           --> View Model
    ㄴ AuthHeader.js
    ㄴ AuthInput.js
    ㄴ AuthButton.js

Result

현재 다루고 있는 페이지가 13페이지 정도로, 그렇게 크지 않은 웹인데도 구조를 잘못 설정했을때 효율성과 생산성이 크게 떨어지는걸 느꼈다. 기존에도 MVVM, MVP 구조들을 이론적으로는 들어본적이 있지만, 역시나 실제로 해봐야 느끼는게 있는거 같다.

아직도 풀리지 않는 의문은 Component 폴더 내에서 view를 screen 단위로 설계를 할지, 요소(button, input, window)단위로 설계할지지만, 이것 역시 프로젝트를 진행함에 따라 꺼내쓰거나 수정하기 편한 구조는 쓰다보면 나올꺼라 생각한다.