View Component Logic Flow

이 문서에서 컴포넌트의 구성은 기본적으로 ( View Asset Component ) 패턴을 사용함.

협업시 각각 모듈 및 페이지를 개발하더라도 동일한 데이터 처리, 비즈니스 로직에 대한 플로우가 필요하고,

화면 구조를 봐야하는 레이어에서는 내부 구현로직을 전부 제외하고자 하는 의도에서 문서를 작성함.

기존의 리액트 프로젝트 진행시 아쉬운점

화면을 그리는 부분(HTML, CSS)과 동작을 제어하는 비즈니스 로직(JS)이 한 컴포넌트에 존재함…

이로 인해, 살짝만 복잡한 컴포넌트를 구현하더라도 평균 400라인이 넘는경우가 많음

PUB와 FE 협업 시 작업공간의 경계를 구분할 수 없고 담당자끼리도 어느부분까지 본인이 개발해야하는지 헷갈림

→ PUB와 FE의 작업영역을 분리

지역상태관리, 이벤트처리, 네이밍 룰이 다양하기때문에 담당자들마다 컨벤션이 너무 상이함…

예시 ) A = onClick으로 처리 / B = useEffect로 처리 등등

→ 컨벤션 가이드 문서화

기초 흐름

코드 베이스

Data Fetching - React-query

Converting

Page Controller ( 페이지 단위로 상태와 이벤트 처리 )

Props Getter ( 컴포넌트 단위로 상태와 이벤트 처리 )

Make Props Object ( Controller와 Getter에서 받은 상태 및 이벤트로 조립 )

View Component ( Props Obejct 전달 후 뷰 컴포넌트에서 사용 )

→ Compount Componet Pattern으로 구현할 경우 Context를 사용