데브허브 | DEVHUB | React 19 Tutorial - 26 - Sharing State Between ComponentsReact 19 Tutorial - 26 - Sharing State Between Components
- React에서 여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 각 컴포넌트의 개별 상태 관리로 인한 데이터 불일치 문제가 발생합니다. 🛒
- 이 문제를 해결하기 위해 "상태 끌어올리기(Lifting State Up)" 패턴을 사용합니다. 이는 공유할 상태를 가장 가까운 공통 부모 컴포넌트로 이동시키는 것을 의미합니다. ⬆️
- 부모 컴포넌트(
useState를 사용하는 곳)가 데이터의 소유자가 되어 상태를 정의하고 변경 방식을 제어합니다. 📦
- 자식 컴포넌트들은 더 이상 자체 상태를 가지지 않고, 필요한 데이터와 상태 변경 함수를
props로 부모로부터 전달받습니다. 🎁
- 자식은 전달받은
props를 사용하여 UI를 렌더링하고, 부모로부터 받은 함수를 호출하여 상태 변경을 요청합니다. 📞
- 이 패턴을 통해 모든 관련 컴포넌트가 동일한 최신 데이터를 반영하여 동기화되며, 부모는 데이터와 변경 로직을 중앙에서 관리하고 수량 제한, 장바구니 비우기 등 특정 규칙을 적용할 수 있습니다. ✅
- "상태 끌어올리기"는 React 애플리케이션 개발에서 필수적인 개념으로, 애플리케이션이 복잡해질수록 더욱 중요해집니다. 🚀