데브허브 | DEVHUB | React 19 Tutorial - 9 - Props PatternsReact 19 Tutorial - 9 - Props Patterns
- 컴포넌트 Props에 기본값을 지정하여, 해당 Prop이 누락되거나
undefined일 경우 자동으로 적용되도록 합니다. 이는 컴포넌트의 유연성을 높여줍니다. 🎁
- 부모 컴포넌트의 여러 Props를 자식 컴포넌트로 개별적으로 나열하지 않고
...props 문법을 사용하여 한 번에 전달할 수 있습니다. 코드를 간결하게 유지하고 향후 Props 추가 시 변경을 최소화합니다. ✨
- 특정 Props만 부모 컴포넌트에서 사용하고 나머지 Props는
...rest 문법으로 묶어 자식 컴포넌트로 전달할 수 있습니다. 이는 Props를 선택적으로 처리할 때 유용합니다. 🧩
- 컴포넌트 태그 사이에 중첩된 JSX 콘텐츠는 React에 의해
children이라는 특별한 Prop으로 자동 전달됩니다. 이를 통해 레이아웃, 카드, 모달 등 유연한 래퍼 컴포넌트를 만들 수 있습니다. 👨👩👧👦
- 위 세 가지 패턴(기본 Props, Spread/Rest Props, Children Props)은 React 프로젝트에서 컴포넌트를 더욱 유연하고 재사용 가능하게 만드는 데 필수적입니다. 🛠️