12. 3. VAC Pattern
View 로직과 JSX를 격리해서 관리하자!
• 반복, 조건부 노출 등 스타일 제어 렌더링에 관련된 처리 만을 수행
• props를 통해서만 제어되며, 스스로의 상태를 관리하지 않는 stateless 컴포넌트
• 이벤트에 함수를 바인딩할 때 추가 처리 없이 적용
13. 3. VAC Pattern
View 로직과 JSX를 격리해서 관리하자!
UI
Functionality
Business
Logic
Props, State
Normal Pattern
JSX Style Child Components
UI
Functionality
Business
Logic
Props, State
VAC Pattern
Props Object
VAC
17. Todo List 예제로 VAC Pattern 적용 시연
https://oss.navercorp.com/fedev/example-vac
18. 5. 서비스 적용 후기(네이버 게임)
네이버 게임 서비스에서 VAC를 활용하여 개발한 회고
19. 5. 서비스 적용 후기(네이버게임)
네이버 게임 서비스에서 VAC를 활용하여 개발한 회고
• 마크업 소스와 분리되어 있어서 QA할 때 수정하는게 좀 편하긴 했어요.
• 비지니스 로직이 모여있어서 다른 개발자들이 봐도 파악하기가 편해요.
• 처음 도입하는 경우에는 스펙이나 환경 이해도가 많이 필요할 것 같아요.
• Props 드릴링 이런게 자주 있게 되어서 불편한 경우가 있긴 했어요.
• 스펙변경 및 설계변경시에 커뮤니케이션 비용이 좀 있는거 같아요.
20. 5. 서비스 적용 후기(네이버게임)
네이버 게임 서비스에서 VAC를 활용하여 개발한 회고
• FE, UI개발 관심사가 분리되어 불필요한 코드 파악이 줄어들었어요.
• UI를 재사용성하기 좋고 불필요한 마크업 개발이 줄어서 유지보수하기 좋습니다.
• UI 개발자가 VAC를 잘 설계하기 위해서는 FE배경 지식이 많이 필요합니다.
• 플리킹 같이 DOM을 직접 핸들링 하는 경우는 적용하기 쉽지 않습니다.
• 렌더링에 영향을 받는 속성이 많은 경우는 하위 컴포넌트로 계속 값을 내려줘야하는 등 관리
가 어렵습니다.