값을 바꾸는 가장 가까운 공통 부모
여러 자식이 같은 값을 읽고 바꾼다면 그 값은 공통 부모로 올려 단방향 흐름을 유지합니다.
컴포넌트는 화면 조각과 데이터 책임을 함께 나눈다
재사용 가능한 UI를 만들려면 버튼과 카드 같은 모양뿐 아니라, 어떤 컴포넌트가 상태를 소유하고 어떤 값이 props로 내려가는지도 함께 정해야 합니다.
받은 props로 화면만 계산한다
목록 아이템이나 버튼처럼 재사용할 조각은 내부 상태를 줄이면 다른 화면에서도 다루기 쉽습니다.
자식은 직접 부모 상태를 고치지 않는다
자식은 `onChange`, `onClick` 같은 함수를 호출해 부모에게 변경 의도를 전달합니다.
화면은 상태에서 계산한다
선택된 탭, 필터된 목록, 버튼 비활성 여부는 별도 DOM 조작보다 상태의 결과로 표현합니다.
props 전달 점검
전달만 하는 중간 컴포넌트가 많아지면 컴포넌트 경계나 Context 도입 시점을 검토합니다.
입력과 출력이 예측 가능해야 한다
같은 props가 들어오면 같은 UI를 그리는 컴포넌트일수록 테스트와 재사용이 쉬워집니다.
부모 state값 소유
props아래 전달
자식 UI화면 계산
event위로 알림
읽는 포인트 컴포넌트 분리는 파일을 많이 만드는 일이 아니라, 변경되는 데이터와 화면 책임을 예측 가능한 경계로 나누는 일입니다.