React · Shared State

공유 상태의 소유자를 찾는 순서

컴포넌트 간 상태 공유가 어려운 이유는 전달 단계가 길어서가 아니라, 값의 원본과 변경 권한이 어디에 있는지 흐려지기 때문이다.

01

사용처 표시

같은 값을 읽는 컴포넌트와 바꾸는 컴포넌트를 다이어그램처럼 표시한다.

02

공통 부모

한 화면 안에서 끝나면 가장 가까운 공통 부모로 상태를 올린다.

03

콜백 설계

자식은 setState 세부 구현보다 의미 있는 이벤트 콜백을 호출한다.

04

전역 판단

여러 route에서 같은 원본이 필요할 때 context나 store를 검토한다.

Lift up
형제 공유 검색어와 결과, 선택 항목과 상세 패널처럼 가까운 공유
가장 작은 공통 범위
Context
깊은 전달 theme, locale, session처럼 넓게 읽는 값
자주 바뀌면 분리 필요
Store
복잡한 앱 상태 여러 feature가 같은 원본을 변경
규칙 없는 전역화 금지
Server state
원격 원본 API 데이터는 캐시와 무효화 정책이 중요
클라이언트 전역 상태와 구분

원본 하나 · 범위 · 콜백 의미 점검

원본 하나 같은 의미의 값이 여러 곳에 복제되어 drift를 만들지 않는다.
범위 한 카드에서만 쓰는 값을 앱 전역으로 올리지 않는다.
콜백 의미 onSave, onSelect처럼 사용자 행동이 드러난다.
서버 상태 API 응답을 전역 store에 무작정 복사하지 않는다.