[React] VAC 패턴이란?

MVC, MVVM 등의 유명한 디자인 패턴을 비롯하여 Presentational-Component, Flux 패턴 등까지 각 상황, 요구사항에 맞는 다양한 디자인 패턴이 있다. 각각의 디자인 패턴은 개발의 관심사에 따라 고안되었다.(기존 패턴들의 단점을 보완하여 나온 패턴들도 있겠지만, 그것도 관심사가 개발 환경에 따라 관심사가 달라진 탓이라고 생각한다..!) 그 중 React Component 개발에 관련있는 VAC 디자인 패턴을 공부하여 소개한다.

 

VAC의 관심사는 ?

React는 Frontend Framework로써, 크게 세가지 일을 한다고 생각한다.

1. UI View - 사용자에게 보여지기 위한 컴포넌트 및 배치를 구성한다.

2. Data Binding - 서버 혹은 내부에서 받거나 처리한 데이터를 View에서 볼 수 있게 한다. 

3. Style - View의 디자인을 입힌다.

 

VAC는 Data와 Style을 분리하는 데 관심이 있다. 내가 개발한 코드의 경우, 보편적으로 다음과 같은 구성을 갖는다.

Source Code Structure

혼자 개발하거나 프로젝트 규모가 작을 때는 크게 문제가 되지 않지만, 여러 명이 협업을 하며 같은 기능의 로직과 스타일을 각각 개발하거나, 코드 양이 비대해진 경우 가독성이 떨어지는 문제가 있다. VAC는 다음과 같은 구성으로 로직과 스타일을 분리한다.

 

VAC를 적용한 코드 구성

View를 두어 Component와 Style에 관련된 코드를 담고, 로직 부분을 분리한다. Logic과 Style이 모두 변경될 때 혹은 코드의 양이 길 때 가독성이 떨어지는 문제를 보완한다.

 

그래서, VAC란?

VAC 패턴은 View Asset Component의 약자로써 View에만 관심이 있는 Component를 만들어 기존 코드에서 분리하는 패턴을 뜻한다. 로직 부분에서 Props로 데이터를 넘겨주고, View는 받은 Props만으로 화면을 렌더링한다. View에서는 Props를 통해 받아온 변수, 함수 등을 필요한 컴포넌트에서 바인딩만 해준다. 그러므로 VAC는 Stateless Component이다. 로직에 따라 스타일이 변하는 경우에도, props에서 받은 값으로 처리하기 때문에 VAC 자체의 State를 변경하지 않는다. 말로만 써놓으면 나중의 내가 보고 이해하지 못할지도 모르니, 예제 코드를 하나 작성하자.

 

예제 코드

Counter에 VAC를 적용한 코드를 작성해보자.

 

먼저, 기능과 들어갈 컴포넌트를 구현해준다.

 

// Counter.tsx

import { useState } from "react"

const Counter = (): JSX.Element => {

const [count, setCount] = useState<number>(0);

const onClickMinus = () => setCount(prev => prev - 1);

const onClickPlus = () => setCount(prev => prev + 1);

return <div>

<p>{count}</p>

<button onClick={onClickMinus}>-</button>

<button onClick={onClickPlus}>+</button>

</div>

}

export default Counter;

 

이 코드에서 VAC 컴포넌트를 따로 뽑으면, 다음과 같이 구현할 수 있다.

 

//Counter.tsx

import { useState } from "react"

import CounterView from "./CounterView";

const Counter = (): JSX.Element => {

const [count, setCount] = useState<number>(0);

const onClickMinus = () => setCount(prev => prev - 1);

const onClickPlus = () => setCount(prev => prev + 1);

const props = {

count, // count = count;

onClickMinus, // onClickMinus = onClickMinus

onClickPlus, // onClickPlus = onClickPlus

}

return <CounterView {...props}/>

}

export default Counter;

Component, Style이 분리되어 가독성이 높아졌고, props라는 객체를 선언하여 CounterView에 바인딩 해줘야 하는 함수들과, 변수를 넘겨준다. CounterView는 다음과 같다.

 

const CounterView = ({count, onClickMinus, onClickPlus}: any) => {

return <div>

<p>{count}</p>

<button onClick={onClickMinus}>-</button>

<button onClick={onClickPlus}>+</button>

</div>

}

export default CounterView;

 

코드를 분리하니, 이미 바인딩된 함수가 어떻게 되든 View에서는 알빠 아니다! 큰 장점이라고 생각한다.

 

마치며 & 궁금증

컴포넌트 속에 모달이나 이벤트가 호출되는 로직이 있을 경우, props를 생성하여 넘겨주긴 어려울 것 같은데 어떻게 넘겨줘야 할까?

 

 

 

틀리거나 다른 좋은 방법이 있으시면 알려주세요. 감사합니다. :)