회사프로젝트에 시범적으로 VAC패턴을 도입하기로 결정했다. 근데 VAC패턴이 뭐지?🤔

디자인패턴

우선 VAC패턴에 대해 이야기하기 전에 디자인패턴에 대한 대략적인 이해가 필요하다.
디자인패턴은 아주 간단하게 말해 설계 패턴이다.
여러명의 개발자가 하나의 프로젝트를 할 때 각각의 기준에 따라 중구난방으로 설계하면
효율적인 코드를 짜기 어려울 것이다.
설계적 문제점을 해결하고 여러 사람들이 쉽게 알아볼 수 있도록 하는 설계적 약속이 바로 디자인패턴이다.

VAC패턴을 도입하게 된 이유

그렇다면 우리는 왜! VAC패턴을 도입하기로 결정했을까?
우리 회사의 프론트팀은 리액트 환경에서 비즈니스 로직과 View의 관심사를 어떻게 하면 분리할 수 있을까에 대한 고민이 많았다.
버튼을 누르면 숫자가 증가하는 페이지를 개발자와 UI/UX디자이너가 함께 작업한다고 가정해보자.
비즈니스 로직과 View가 한군데에 모여있다면, UI/UX디자이너와 개발자가 JSX를 같이 관리해야하기 때문에 UI/UX디자이너가 JSX를 수정하는것이 쉽지 않고 컨플릭이 발생할 확률이 높아진다.

VAC패턴 (View Asset Component)

VAC 패턴은 View 컴포넌트에서 JSX 영역을 Props Object로 추상화하고, 비즈니스 로직컴포넌트와 View 컴포넌트를 따로 관리한다.

사용해보기

input에 입력한 값을 옆에 나타내는 간단한 예제가 있다.
먼저 vac패턴을 적용하지 않은 App.js이다.

export default function App() {
  const [value, setValue] = useState("");
 
  const handleInput = (e) => {
    setValue(e.target.value);
  };
 
  return (
    <div>
      <input type="text" onChange={(e) => handleInput(e)} />
      <span>{value}</span>
    </div>
  );
}

vac패턴 사용시

App.js

export default function App() {
  const [value, setValue] = useState("");
 
  const handleInput = (e) => {
    setValue(e.target.value);
  };
 
  const props = {
    value,
    handleInput,
  };
 
  return <AppView {...props} />;
}

view에서 필요한 모든 데이터를 props의 형태로 view영역에 전달한다.

App.view.js

const AppView = ({ value, handleInput }) => {
  return (
    <div>
      <input type="text" onChange={(e) => handleInput(e)} />
      <span>{value}</span>
    </div>
  );
};
 
export default AppView;

VAC패턴의 가장 큰 장점은 관심사가 분리되어있다는 것이다.
input의 디자인이 변경될 경우 View영역만 보면 되고, 비즈니스 로직이 변경될 경우 비즈니스 로직을 담당하는 영역만 보면 되기 때문이다.

마무리

아직 VAC패턴을 도입하는 초기 단계이기 때문에 아주 간단하게 블로깅해보았다. 이렇게 저렇게 사용해보면서 느껴지는 점들이나 참고해야할 점들을 추가할 예정이다!✨