데브허브 | DEVHUB | React 19 Tutorial - 24 - useState with ObjectsReact 19 Tutorial - 24 - useState with Objects
useState를 사용하여 이름, 나이, 이메일 등 여러 관련 값을 하나의 객체로 묶어 상태를 선언할 수 있습니다. 📦
- 상태 객체를 직접 변경하는 것은 리렌더링을 유발하지 않으므로, 반드시
setter 함수를 사용해야 합니다. 🚫
setter 함수에 새 객체를 전달하면 기존 객체 전체가 교체되므로, 변경하지 않는 속성들은 사라질 수 있습니다. 🗑️
- 기존 속성을 유지하면서 특정 속성만 업데이트하려면, 스프레드 연산자(
...)를 사용하여 이전 객체를 먼저 복사한 후 변경할 속성을 덮어씌워야 합니다. ✨
- 여러 속성을 동시에 업데이트할 때도 동일하게 스프레드 연산자를 사용하여 기존 객체를 복사하고 변경할 속성들을 지정합니다. 🔄
- 중첩된 객체를 업데이트할 때는 상위 객체만 스프레드하면 중첩 객체 전체가 교체되어 내부 속성이 사라질 수 있습니다. 🧱
- 중첩된 객체의 속성을 업데이트하려면, 외부 객체와 중첩된 객체 모두에 스프레드 연산자를 적용하여 기존 값을 유지해야 합니다. 🧩
- 핵심 요약: 상태 업데이트 시
setter 함수 사용, 객체 전체 교체 방지를 위한 스프레드 연산자 활용, 특히 중첩 객체는 외부/내부 모두 스프레드 적용이 필수입니다. ✅