View Component Logic Flow

2024-01 사내에 공유한 짧은 합의 문서. 컴포넌트를 View Asset Component 패턴으로 나눠 퍼블리셔와 프론트엔드의 작업 경계를 정하고, 데이터 처리와 비즈니스 로직의 흐름을 모듈마다 같게 맞추려는 목적이었다. 원문의 흐름도는 git 이력의 PDF에 있다.

문제

화면을 그리는 HTML, CSS와 동작을 제어하는 JS가 한 컴포넌트에 있어 조금만 복잡해도 400줄을 넘겼다.
퍼블리셔와 프론트엔드가 같은 파일을 만지니 어디까지가 누구 일인지 흐렸다.
지역 상태, 이벤트 처리, 이름 규칙이 담당자마다 달랐다. 같은 일을 누구는 onClick에서, 누구는 useEffect에서 처리했다.

합의

작업 영역을 나누고 컨벤션을 문서로 고정했다. 데이터는 아래 순서로만 흐른다.

Data Fetching: React Query
Converting: 응답을 화면 모델로 변환
Page Controller: 페이지 단위 상태와 이벤트
Props Getter: 컴포넌트 단위 상태와 이벤트
Make Props Object: Controller와 Getter가 준 상태와 이벤트를 조립
View Component: Props Object만 받아 그린다

Compound Component 패턴으로 만들 때는 Context로 Props Object를 내려보낸다. 이 흐름은 이후 Starter Kit과 ARTIST PROP의 use*Converter, useSearchParams, 서비스 레이어 패턴으로 이어졌다.