여러 컴포넌트가 공유하는 상태를 가장 가까운 공통 부모에 둡니다.
두 자식이 같은 값을 표시하거나 변경해야 하면 공통 부모가 상태를 소유하고 값과 콜백을 내려줍니다.
실제로 공유하는 가장 가까운 부모를 선택해 불필요한 렌더 범위를 줄입니다.
같은 정보를 여러 state에 중복 저장하지 않고 하나를 원본으로 둡니다.
각 자식이 복사 상태를 가지면 어느 값이 최신인지 결정하기 어렵습니다.
로컬 프로젝트에서 확인해보세요두 번째 Summary 컴포넌트에서 남은 진도를 표시하세요.
import { useState } from "react";
function Slider({ value, onChange }) {
return (
<input
type="range"
min="0"
max="100"
value={value}
onChange={(e) => onChange(Number(e.target.value))}
/>
);
}
function Summary({ value }) {
return (
<p>
{value}% · {value === 100 ? "완료" : "학습 중"}
</p>
);
}
export default function App() {
const [progress, setProgress] = useState(35);
return (
<main>
<Slider value={progress} onChange={setProgress} />
<Summary value={progress} />
</main>
);
}