VAC 패턴

[sewonkimm]

View type

1. data 처리 (마크업)
2. user interaction (JS)
3. 비즈니스 로직 처리 (React)

1번은 퍼블리셔, 2,3번을 FE개발자가 처리하는 구조로 개발을 진행하는 것으로 나뉘기도 한다. 그러나 React에서는 JSX로 UI와 로직을 함께 관리하므로 종종 conflict이 발생하고 관심사가 분리되지 않는 문제가 있었다.

관심사의 분리

VAC Pattern

VAC(View Asset Component)

• 렌더링에 필요한 JSX를 관리하는 컴포넌트
• 비즈니스 로직과 UI를 분리하는 것 & UI 관심사도 분리가 가능

구체적인 구현

A 기능을 구현한다고 하면

1. A 컴포넌트에 Props Object를 생성하고 JSX에서 사용할 state나 method 정의
2. JSX는 Aview 컴포넌트로 분리(VAC)
3. JSX에서 필요한 이벤트 핸들러 같은 것들을 Props로 받아옴

올바른 VAC 컴포넌트는 핸들러를 바인딩만 할 뿐, 기능이나 상태 제어에 관여해서는 안된다.

Pros and cons

• 로직과 View가 분리되면 독립적인 UI 테스트가 가능하고
• 로직과 View의 충돌이 사라져 변경에 용이하지만
• Props가 비대해질수 있다.

Presentational & Container Pattern

로직을 수행하는 컴포넌트와 UI를 보여주는 컴포넌트를 분리하는 패턴. 이렇게 되면 동일한 마크업이나 레이아웃은 재사용 가능하다. Dan Abramov가 2015년 처음 소개했으나 2019년에 hooks를 사용하면서 더 이상 이 패턴을 추천하지 않음. (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)

Presentational component

• UI 관련된 로직만 처리
• 필요하다면 UI 관련 state를 가질 수 있다. (VAC와 다른 점)

Container component

• 동작에 관한 컴포넌트
• 마크업 구조나 스타일을 가질 수 없다.