Mobx + MVVM PATTERN with Next.js

BBAKJUN·2022년 3월 17일

next.js

React

목록 보기

2/7

왜 이걸 갑자기 사용하나?

왜냐면...

그렇다 나 취업함 (일단박수)

내가 자주 사용하던
스택과 디자인 패턴은 아래와 같다

React Hooks Components

Redux-Thunk

PC pattern

회사에서 사용하는 스택과 디자인 패턴은

React Class Components

Mobx

MVVM pattern

Apollo

GraphQl

라고 간단하게 말하면 될거같다.
(너무나 당연하게 React와 Next를 사용하는 부분은 일치했기에 일치하는 부분은 생략했다)

리덕스와 PC 패턴은 자주 사용해봐서 금방 다시 구축할수있었지만,
회사의 스택에 맞춰서 아키텍처를 구현해보려 하니 매우 난항을 겪었다..

22.03.17까지는 일단 백엔드 파트 없이 구현 가능한
Mobx + Class Component + MVVM 패턴을 사용해보는거까지 완료해씀

팀에 트롤러가 되지않기위해
사내코드와 같은 스텍을 사용하여 TODO LIST APP 을 제작하는게 어떻겠냐는 사수분의 제안에 응하여 제작하기로 하였음

체크사항

일단 내가 체크해야할 사항들이었다.

1. Hooks와 다른 Class형 컴포넌트를 어떻게 구현할지?
2. React에 MVVM을 어떻게 적용시키는지?
3. 그렇다면 아키텍처는 어떻게 구축하는가?
4. mobx를 어떻게 적용시킬지?

사실 1번은 상당히 금방했다.
Hooks 이전에도 Class로 개인플젝을 진행해본적이 있었기에 어렵지가 않았는데

2번부터 조금 빡셌다. 들어나봤지 내가 해본적은 없었기에 일단 다른 사람의 블로그 들을 참조했고 그결과 이 블로그가 상당히 쉽게 이해하는데 도움이 되었었다.

MVVM

나만 모르고 다들 아는 지식이지만
MVVM은

View : 유저와 상호 작용하는 UI 계층
ViewController : ViewModel에 대한 접근 권한이 있고 사용자의 이벤트를 처리해주는 계층
ViewModel : Model에 대한 접근 권한이 있고 비즈니스 로직을 처리하는 계층
Model : 어플리케이션 데이터 소스를 가지고있는 계층

이라고 생각해두는것이 편할것같다.

라고 생각하여 TODOLIST APP의 디렉토리 구조를 이렇게 잡아보았다.

Directory Structure

component/Layout.js

전체적인 글로벌 레이아웃을 담당하는 글로벌 컴포넌트
title과 children을 props로 받아와 dom title 을 정해주며 페이지를 렌더링해주는 컴포넌트다

component/Todo

Todo 디렉토리는 mvvm패턴을 사용한 모듈이다

TodoConsumer : ViewModel에 store를 주입해 Model과 연결 , 위에서 만들어진 ViewModel을 View와 연결(props)
TodoController : View 계층에서 일어나는 유저 상호작용을 ViewModel에게 전달해주는 역할이면서 ViewModel에서 액션이 발생함으로써 다시 View에게 Props로 전달해주는 역할을 하고있다.
TodoView : 가장 최하위 Depth에 위치한 계층으로서 최종적으로 렌더링 되는 계층이다.
TodoViewModel : Model과 Controller를 연결 해주는 역할

그럼 여기서 Model은 어딨는데? 라고 할수있다

전역상태관리에 편할수있도록
RootStore를 만들어주고
그 전역상태가 필요한 계층에게만 주입시킬수있는 Provier 필요했기에 _app.js에 Provier를 넣어 상태를 주입시켜주었다.

따로 디렉토리 최상단에 store폴더를 만들어
RootStore.js를 아래와 같이 작성하였다.

여기서 RootStore 클래스의 getStore 메소드를 사용하여 Model을 불러올 예정이다.

그렇게 _app.js에서도 사용해주었다

<Provider {...rootStore.getStores()}>
	<Component {...pageProps} />
</Provider>

그런데 이 파일을 보며 Redux-Thunk의 combineReducers와 비슷하다??? 라는 느낌을 받았었다

아래의 사진은 다른 사이드 프로젝틀르 진행하며 작성했던 Redux-Thunk의 코드다

흠 일단 비슷한건 ㅇㅋ 그냥 그렇다고
담으로 넘어가자

TodoApp 구현

TodoApp에서 필요한 액션은 무엇일까? 라는 생각을 해보자.

사실 이걸 왜하냐 CRUD가 가능한가를 알아보기 위해 하는건데 말야

하지만 난 과감하게 U를 살짝 바꿨다. 완료한 Todo상태로

그래서 생각해낸 아래의 액션들이었다.

addTodoList
completeTodoList
removeTodoList

store에 저장되어야하는 GlobalState는

notComleteTodo
completeTodo

이다 두놈다 배열로 받아주었고

이 action들과 state들은 고맙게도 Mobx에서 따로 API를 제공해준다

observable, action api인데

observable 데이터의 변화를 관찰해주는 api이고
action은 말그대로 state를 변경시켜주는 액션이다.

computed도 있는디 여기선 안썻다...

자세한건 아래 공식문서에서 확인 고고

암튼 constructor(생성자) 메서드에 makeObserable를 사용하여 각각 타입? 을 지정해주었다

constructor() {
	makeObservable(this, {
		notCompleteTodo: observable,
		completeTodo: observable,
		addTodoAction: action,
		removeTodoAction: action,
		completeTodoAction: action,
	})
}