두 컴포넌트가 동일한 state를 공유해야 할 때, 그 state를 가장 가까운 공통 조상으로 이동("끌어올리기")하고 props를 통해 아래로 전달하여 단일 진실의 원천이 되도록 합니다.
jsx
function Parent() {
const [query, setQuery] = ();
(
);
}
각 자식이 자체 query를 가지면 서로 동기화가 깨집니다. 끌어올리면 입력과 결과가 항상 일치합니다.
state를 너무 높이 끌어올리면 이를 사용하지 않는 여러 중간 컴포넌트를 통해 props를 전달해야 할 수 있습니다:
<App user={user}>
<Layout user={user}> {/* 그냥 전달만 함 */}
<Sidebar user={user}> {/* 그냥 전달만 함 */}
<Avatar user={user} /> {/* 마침내 여기서 사용됨 */}
children으로 전달하여 데이터가 통과되지 않고 사용되는 곳에 머물게 합니다.지침 원칙: state는 필요한 만큼만 높이 끌어올리세요 — 그 이상은 안 됩니다. 과도하게 끌어올리면 넓은 re-render와 prop drilling을 유발하고, 부족하게 끌어올리면 동기화가 깨진 중복을 유발합니다.