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