【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript
Props 문법
단일 Prop 객체 전달
자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 Prop들로 나누는 대신 하나의 Prop값으로 전달할 수 있습니다.
<CoreConcept
title={CORE_CONCEPTS[0].title}
description={CORE_CONCEPTS[0].description}
image={CORE_CONCEPTS[0].image} />
<CoreConcept
{...CORE_CONCEPTS[0]} />이처럼 CoreConcept 컴포넌트에 하나의 concept Prop를 전달할 수 있습니다. 그러면 CoreConcept 컴포넌트에서는 그 하나의 Prop만 받게 됩니다:
export default function CoreConcept({ concept }) {
// Use concept.title, concept.description etc.
// Or destructure the concept object: const { title, description, image } = concept;
}받은 Prop들을 단일 객체로 그룹화
여러 Prop을 컴포넌트에 전달한 다음, 컴포넌트 함수 내에서 자바스크립트의 “Rest Property” 문법을 사용하여 단일 객체로 그룹화할 수 있습니다.
예를 들어, 컴포넌트가 이런 식으로 사용되었다면:
<CoreConcept
title={CORE_CONCEPTS[0].title}
description={CORE_CONCEPTS[0].description}
image={CORE_CONCEPTS[0].image} />받은 prop들을 다음과 같이 단일 객체로 그룹화할 수 있습니다:
export default function CoreConcept({ ...concept }) {
// ...concept groups multiple values into a single object
// Use concept.title, concept.description etc.
// Or destructure the concept object: const { title, description, image } = concept;
}기본 Prop 값
가끔 선택적 Prop을 받을 수 있는 컴포넌트를 만들게 될 때가 있습니다. 예를 들어, ‘type’ Prop을 받을 수 있는 커스텀 Button 컴포넌트가 있습니다.
그러면 Button 컴포넌트는 type 설정 여부와 상관 없이 모두 사용할 수 있습니다.
`type` 설정이 된 경우:
<Button type="submit" caption="My Button" />
되지 않은 경우:
<Button caption="My Button" />이 컴포넌트가 작동하도록 하려면, type Prop에 대한 기본 값을 설정할 수 있습니다. -전달되지 않는 경우를 대비
자바스크립트는 객체 비구조화를 사용할 때, 기본 값을 지원함으로 이를 쉽게 달성할 수 있습니다.
