[React] React MVVM 구조 MobX / Redux 없이 구현하기 (Feat. Context API)

[2021-03-04 최종 수정]

발단

KOS 프로젝트 진행 중에 상태관리 라이브러리(Redux, Mobx)를 추후 도입하기로 하고, 먼저 MVVM 패턴만 사용하기로 하였다.

하지만 기존에 나와있는 폴더 구조들은 모두 react와 Redux / Mobx 를 연동하여 만들어낸 구조들이었다.

다음은 상태관리 라이브러리를 사용하지 않고 MVVM 패턴을 구현한 사이트이다.

https://github.com/davinci2015/react-mvvm-pokemon ( Class 이용 )

https://velog.io/@dlrmsghks7/whatismvvmpattern ( Hook 이용 )

 

위의 사이트들에서 제안한 구조를 그림으로 나타내보자.

View, View Controller, View Model, Model로 구성되어있으며, View로 들어온 사용자의 Action이 View Controller에 있는 로직 메소드를 호출하고, 해당 메소드가 View Model의 메소드를 호출하면서 Model의 state를 변경하는 흐름이다.

여기서 문제는 Model의 속성이 변하는 것을 View가 알 수 없다는 것이다.

 

예를 들어, 사용자가 버튼을 클릭해서 hi라고 저장되어있는 state를 hello라고 바꿨다면 Model에는 hello가 반영되어있지만, Model이 바뀌었는지 View가 알 수 없기 때문에 사용자에게는 여전히 hi가 보여진다.

 

문제 해결 과정

이 문제는 Controller가 Model의 속성을 구독함으로써(변화를 전달받음으로써) 해결할 수 있는데, 가능한 방법에는 두가지가 있다.

현재 Controller가 Model의 속성을 구독할 수 없는 이유는 View Controller와 View Model의 레벨이 같아서이므로, Model을 상위 컴포넌트로 올려주는 것이 첫번째 방법이다.

또 다른 방법은 View Controller와 View Model의 레벨을 유지한 채로 Model이 가진 State만 전달하는 것이다. 어떻게 할 수 있을까?

 

1. Model을 View Controller의 상위 컴포넌트로 만드는 방법

이 방법은 React의 원리를 이용하는 가장 기초적인 방법으로 상위 컴포넌트가 props로 하위 컴포넌트에게 state를 내려줄 수 있는 특성을 이용하는 것이다. Model에서의 속성 State가 Controller에 Props로 전달되는 원리로 자동 구독이 가능하다.

 

React 사이트에서도 Context API 쪽에 다음과 같은 말이 기재되어있다.

이렇게 하향식 데이터 흐름에 기대는 것을 추천하고 있다.

 

하지만, Model을 상위 컴포넌트로 보내는 것은 아래의 그림과 같이 구현되는 것이다.

User와 맞닿는 인터페이스 컴포넌트가 Model이라니.. 상위 컴포넌트인 Model의 State를 React적인 방식으로 이용할 수 있는 방법이지만 논리에 어긋난다.

 

따라서, 구독 기술을 사용해보려한다.

 

2. Model State의 구독하도록 구현

구독 기술 정리

값을 구독할 수 있도록 만드는 기술은 어떤게 있을까?

https://www.educative.io/blog/react-design-patterns-best-practices 참고

 

위의 사이트는 전반적으로 이렇게 구독을 활용한 기술들이 왜 나오게 됐으며 발전하면서 어떤 기술들이 차례로 나왔는지를 설명하고 있다.

요약하자면 다음과 같다.

 

1. MVC 구조

처음에는 MVC 구조가 있었다.

MVC 구조에서는 사용자가 Action을 가하면 Controller가 Model의 State를 변경하고, State의 변경이 View에 적용된다. 문제는 단방향 흐름이 아니라 View도 직접적으로 Model의 State를 수정할 수 있는 양방향 흐름이라는 것이다.

이러한 구조에서는 View가 각 Model의 State를 구독하고 있는 상태가 된다. 하지만 구독하고 있는 Model의 state를 직접 수정할 수 있으므로 한번의 Action이 연쇄적인 트리거를 일으켜 코드를 이해하거나 디버깅하기 어렵게 만들었다.

 

2. Flux 패턴

MVC 구조의 문제점을 해결하기 위해 페이스북에서 Flux 패턴을 만들었다.

Flux 패턴이란 Action => Dispatcher => Model(Store) => View => Action로 한 action으로부터의 단방향 흐름이 이어져 view까지 적용되는 패턴을 의미한다.

MVC와는 다르게 Model은 Dispatcher로만 갱신될 수 있었고, View는 Model의 State를 구독한다.

 

3. Redux

이러한 Flux 패턴을 더 간단하게 구현할 수 있지 않을까하는 고민 끝에 나온 것이 Redux와 같은 상태관리 라이브러리이다.

Redux는 하나의 Model(Store)로 구성되어있으며 전체 State가 이러한 Store(진리의 원천)에 집합해있다. 동시에 이를 조정할 수 있는 Dispatcher로 Reducer를 사용한다.

Reducer는 state를 변경하는 로직이며, delay가 없는 순수 함수로만 구성되어야 한다. 즉, api 통신 등을 Reducer에서 수행할 수 없다.

 

구현

개념

Model에서 Context를 만들고, Context를 Provider를 통해서 View Model에 전달한다.

기존과 비교해보면 View Controller의 역할을 View Model이 하고 있으며, View Model과 Model의 레벨이 같음에도 구독기술을 이용하여 Model의 State를 View에서 사용할 수 있게 된다.

 

사용자의 action에 따른 흐름을 살펴보자.

• 사용자가 View에 액션을 가함
• View는 추상화된 메소드 호출
• View Model의 처리 로직 메소드가 호출됨
• 처리 로직 메소드는 구독하고 있는 Model의 단순 변경 메소드를 호출
  • Model의 속성과 단순 변경 메소드를 둘 다 구독해야함
• Model의 단순 변경 메소드가 호출되면서 Model 속성 변경
• View Model에서 Model의 속성을 구독하고 있으므로 변경 감지
• View Model에서 변경된 속성은 View에 넘겨지고 있으므로 View도 변경 감지

 

인터넷에 MVVM 구조를 치면 나오는 이미지를 그대로 구현하고 있음을 알 수 있다.

 

https://t1.daumcdn.net/cfile/tistory/261A2545541843742C

 

코드

• Model

import { useState, createContext, useContext } from 'react';

// create context to use open
export const OpenStateContext = createContext();
export const OpenDispatchContext = createContext();

// Model은 Context 저장 및 제공
export const OpenContextProvider = ({ children }) => {
    const [open, setOpen] = useState(true);

    return (
        <OpenStateContext.Provider value = {open}>
            <OpenDispatchContext.Provider value = {setOpen}>
                {children}
            </OpenDispatchContext.Provider>
        </OpenStateContext.Provider>
    );
};

export function useOpenState() {
    const context = useContext(OpenStateContext);
    return context;
}

export function useOpenDispatch() {
    const context = useContext(OpenDispatchContext);
    return context;
}

Model에서는 관리하고 싶은 값을 정의하고, Context로 등록한다.

Context는 다른 컴포넌트에서 사용할 수 있도록 내보낸다(export).

• Provider

import React from 'react';
import ViewModel from './ViewModel';
import { OpenContextProvider } from './Model/SideBarModel';

// Model과 View Model을 이어주는 역할
function Provider() {
    return (
        <OpenContextProvider>
            <ViewModel/>
        </OpenContextProvider>
    );
}

export default Provider;

Provider는 Model이 내보낸 Provider를 받아 ViewModel을 감싸준다.

이렇게 함으로써 ViewModel이 Model의 Context를 구독할 수 있다.

• View Model

import React from 'react';
import { useOpenState, useOpenDispatch } from './Model/SideBarModel';
import SideBarView from './View/SideBarView';
import PageView from './View/PageView';

// View Model은 Model의 Context를 구독하고, 갱신하는 역할
function ViewModel() {
    const open = useOpenState();
    const setOpen = useOpenDispatch();

    const handleSideBarOpen = () => {
        setOpen(true);
    };

    const handleSideBarClose = () => {
        setOpen(false);
    };

    return (
        <React.Fragment>
            {open ?
                <SideBarView
                    handleSideBarClose = { handleSideBarClose }
                    open = { open }
                /> : undefined
            }
            <PageView
                handleSideBarOpen = { handleSideBarOpen }
                open = { open }
            />
        </React.Fragment>
    );
}

export default ViewModel;

View Model은 Model의 Context를 사용하여, Model의 State를 변경하고 구독한다.

View Model에서 구독하고 있는 State를 View에는 props로 내려보내주면 된다.

• View

import React from 'react';
import Grid from '@material-ui/core/Grid';
import Tooltip from '@material-ui/core/Tooltip';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';

// View는 Controller의 data 및 function을 사용하여 사용자와 상호작용
function SideBarView(props) {
    const {
        handleSideBarClose,
        open
    } = props;

    return (
        <Grid className="sidebar">
            <header className="sidebar-header">
                <Grid className="sidebar-header-title">
                    <img src="/logo192.png"/>
                    <h1>KOS</h1>
                </Grid>
                <Grid className="sidebar-btn">
                    <Tooltip title="Close Sidebar" aria-label="close sidebar">
                        <ArrowBackIosIcon onClick={handleSideBarClose}/>
                    </Tooltip>
                </Grid>
            </header>
        </Grid>
    );
}

export default SideBarView;

View는 props로 받은 속성과 메소드를 사용하여 렌더링한다.

 

실제 구현

아래의 구조가 실제로 구현된 구조이다.

실제로 프로젝트를 구현하다보니, Model의 State는 View에서 직접 받아서 쓰고 처리 로직은 View Model을 거치는 식으로 구조를 짜게 되었다.

이렇게 된 이유는 React와 Context API의 특성과 연관지을 수 있다.

 

 

Context API 특성 상 State는 직접 구독을 하고 있는 컴포넌트에서만 변경된다. 즉, Model의 State가 바뀐 것을 ViewModel의 State는 반영할 수 있지만, props로 전달된 View는 ViewModel의 State가 바뀐 것만을 반영할 수 있다는 뜻이다.

 

Model의 State 변경 => View Model의 State 변경 => View의 State 변경이 연쇄적으로 일어나지 않을까 싶지만 안타깝게도 그렇지 않은 경우가 있다. React의 특성 상 복합타입인 Array나 Object는 겉모습이 바뀌지 않았으면 재렌더링되지 않는다. 따라서 View Model의 State는 변경되었지만, View로 내려준 props는 겉모습이 변경되지 않았으므로 바뀌지 않는다.

 

예를 들어 Model의 State 중 [1,2,3,4]이라고 되어있는 상태를 [1,2,3,3]이라고 바꾸면, 값을 바로 구독하고 있는 View Model에서는 [1,2,3,3]으로 State가 갱신되지만 props로 값이 전달되는 View에서는 갱신이 적용되지 않는다.

이러한 문제를 해결하기 위해 forceUpdate를 사용하여 강제 재렌더링하는 등의 임시 방편을 사용할 수도 있지만,

ViewModel에서 props로 state를 전달해주는 대신 View에서 각각 Model의 State를 구독하는 방식으로 수정해주었다.

 

중간에 보았던 것들

• https://blog.naver.com/backsajang420/221368106022

• https://haruair.github.io/flux/docs/overview.html

• https://junilhwang.github.io/TIL/CodeSpitz/Object-Oriented-Javascript/02-MVVM/#mvvm%E1%84%8B%E1%85%B4-%E1%84%80%E1%85%A2%E1%84%82%E1%85%A7%E1%86%B7