디자인패턴 M-V-VM에 대한 고민

MVVM디자인 패턴으로 개발한지 8개월이 넘어간다.

Model - View - View Model로 분기하여 작업해 재사용성을 극대화 할 수 있다.

View는 렌더링

Model은 비즈니스 데이터 형식 정의

ViewModel은 View에서 사용되는 데이터들을 관리하게 된다.

 

그런데 여기서 의문점이 있다.

 

1. View에서는 State사용을 피해야하는 건지?React Next.js는 아주 간편한 변수관리 State라는게 있다.

예를들면 이런것이다.

function Input():ReactElement {
    const [value, setValue] = useState<string>('');

    const handleChangeValue = (e:ChangeEvent<HTMLInputElement>) => {
        const { value } = e.target;

        setValue(value);
    }

    return <input value={value} onChange={handleChangeValue) />
}

그런데 이 handleChangeValue도 (물론 예시이지만) 다른곳에서 똑같이 작성된다면?

handleChangeValue를 사용하는 컴포넌트가 무려 1000개가 넘는다면?

너무 비효율적이지 않나? 라는 생각을 했다.

물론 handleChangeValue와 같은 단순한 코드가 아닌 handleScroll과같은 어느정도 로직이 있는 코드들을 가만히 보고 있자니 문득 그런생각이 들었다.

 

2. 그렇다면?

ViewModel에 모오오든 State 변수들을 집어넣고 모든 event들을 집어넣는것이다.

mobx를 사용해서 observable을 적용시키고 view에서는 ViewModel을 inject해서 observerble변수를 State처럼 사용할 수 있으니..

 

3. 단점은?

ViewModel이 너무 비대해진다.

너무길다.. 중간쯤 있는 이벤트를 찾으려면 두세번 봐야한다..

 

4. 장점은?

View가 어마어마하게 간단 명료해지고 매우 가독성이 높아진다.

View에는 inject, props, useEffect(여기 사용되는 이벤트도 ViewModel에 있다)를 제외하고는 렌더링하는 컴포넌트밖에 없다.

여러 View에서 inject만 하면 같은코드를 다시 작성할 필요가 없다.

특히 image나 video File을 사용하는 코드들이 재사용되니 너무 편하고 보기도 깔끔하다.

 

5. 진짜 고민

이게 맞는가? MVVM디자인패턴에 대해 정말 열심히 찾아보고 있고

내 친구 GPT에게도 수없이 물어봤지만 명확한 정답을 찾지 못했다.

 

6. 결론

[아직 고민중이다..ㅠㅠ]

 

interface IProps {
	viewModel: viewModel;
    router: NextRouter;
}

function View(props: IProps) {
    const lang = LocaleModule.getInstance();
    const router = props.router;
    const viewModel: viewModel = props.viewModel;

    useEffect(() => {
        viewModel.getList();
        return () => {
            viewModel.dataReset();
            viewModel.resetFiles();
        };
    }, []);

    return (
        <SubPageContainer title={lang.get('title')} style={{ height: '100vh' }}>
            <ListWrap >
                {viewModel.list.map((item: listDto, key: number) => {
                    return (
                        <ListItem
                            key={key}
                            item={item}
                            onClickEdit={viewModel.onClickEdit}
                            onClickDelete={viewModel.onClickDelete}
                        />
                    );
                })}
            </ListWrap>
            <SuccessBtn
                title={lang.get('success')}
                onClick={viewModel.onClickWriteFinish}
            />
        </SubPageContainer>
    );
}

export default inject('viewModel')(observer(View));