REACT STATE MAP

상태 공유는 소유 컴포넌트와 왕복 경로를 먼저 그린다

전역 상태 도구를 고르기 전에, 값이 내려가는 props 경로와 이벤트가 올라오는 callback 경로를 한 트리에서 확인합니다.

가장 가까운 공통 부모 owner state → props down / callback up 읽는 컴포넌트와 바꾸는 컴포넌트를 모두 포함하는 가장 가까운 부모가 기본 소유자 후보입니다.

컴포넌트 트리 props는 내려가고 이벤트는 올라감

Dashboard state owner selectedTeam, filter, setFilter를 소유

props ↓

callback ↑

SummaryPanel 읽기 전용 selectedTeam과 filter로 카운트와 합계를 표시

FilterToolbar 업데이트 요청 onFilterChange(next)를 호출해 소유자에게 변경을 요청

CardList 파생 결과 렌더 filter로 필터링한 배열을 map으로 그립니다.

CardItem 자식 이벤트 선택, 즐겨찾기 같은 행동은 callback으로 위임합니다.

props down owner가 값을 계산하고 필요한 자식에게만 내려보냅니다.

callback up 자식은 state를 복사하지 않고 변경 의도만 올려보냅니다.

읽는 컴포넌트 표시 값을 화면에 쓰는 컴포넌트를 트리에서 모두 표시합니다.

바꾸는 컴포넌트 표시 사용자 이벤트가 발생하는 위치와 callback 경로를 표시합니다.

전달만 하는 중간 노드 확인 중간 컴포넌트가 props를 통과만 시키면 context 후보입니다.

복사 state 제거 원본에서 계산할 수 있는 값은 자식 state로 복사하지 않습니다.

lift up형제가 함께 읽으면 공통 부모로 올립니다.

context전달 단계가 깊고 여러 가지가 읽으면 고려합니다.

memo공유 범위가 넓어진 뒤 렌더 비용을 측정합니다.