반복 구조 찾기
카드, 리스트 아이템, 폼 필드처럼 같은 시각 구조가 반복되는지 본다.
shape책임 이름 붙이기
UserCard, PriceInput처럼 컴포넌트 이름이 맡은 역할을 설명해야 한다.
single purposeprops 경계 설계
자식이 알아야 하는 값만 props로 넘기고 도메인 전체 객체 노출을 줄인다.
surface상태 끌어올리기
여러 자식이 같은 값을 공유하면 가장 가까운 공통 부모가 상태를 소유한다.
lifting statetoo many props
자식이 부모 구현을 너무 많이 앎
props가 계속 늘면 합성, context, 도메인 훅 중 하나를
검토한다.
경계 냄새
state split
같은 상태가 여러 곳에 복제
선택 상태나 입력값이 양쪽에서 따로 변하면 단일 출처로
올린다.
source of truth
rerender cost
부모 변경에 리스트 전체가 흔들림
key, memo, props 안정성을 확인하되 먼저 데이터 흐름을
단순화한다.
premature memo 금지
children slot
레이아웃은 같고 내용만 다름
카드/패널은 children으로 내부를 주입하면 props 폭발을 줄일 수
있다.
composition