React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자! React 협업이 어려운 점을 살펴보고 View 로직과 JSX를 격리해서 관리하는 것을 소개합니다. 목차 1. React 협업 - React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나? 2. React 협업이 어려운 점 - React 협업에서 무엇이 우리를 괴롭히는가? 3. VAC Pattern - View 로직과 JSX를 격리해서 관리하자! 4. 구현 예제(with VAC Debugger) - VAC Debugger를 활용해 VAC Pattern을 구현해보자. 5. 서비스 적용 후기(네이버 게임) - 네이버 게임 서비스에서 VAC를 활용하여 개발한 회고

1. React VAC Pattern
View 로직과 JSX의 의존성을 최소화 하자!
NTS 프론트엔드개발 박우영

2. Contents
1. React 협업
2. React 협업에서 어려운 점
3. VAC Pattern
4. 구현 예제(with VAC Debugger)
5. 서비스 적용 후기(네이버 게임)

3. 1. React 협업
React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나?

4. 1. React 협업
React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나?

5. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

6. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

7. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

8. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

9. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

10. 2. React 협업에서 어려운 점
React 협업에서 무엇이 우리를 괴롭히는가?

11. 3. VAC Pattern
View 로직과 JSX를 격리해서 관리하자!

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

14. 3. VAC Pattern
View 로직과 JSX를 격리해서 관리하자!
Props Object

15. 3. VAC Pattern
View 로직과 JSX를 격리해서 관리하자!
VAC

16. 4. 구현 예제(with VAC Debugger)
VAC Debugger를 활용해 VAC Pattern을 구현해보자.

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을 직접 핸들링 하는 경우는 적용하기 쉽지 않습니다.
• 렌더링에 영향을 받는 속성이 많은 경우는 하위 컴포넌트로 계속 값을 내려줘야하는 등 관리
가 어렵습니다.

21. Thanks! End of Documents.