React의 기본값이 있는 선택적 소품
React의 Props를 사용하면 React의 전체 구성 요소 트리를 통해 흐를 수 있는 서로 다른 구성 요소 간에 데이터와 인수를 전달할 수 있습니다. 다른 구성 요소에 전달된 props는 TypeScript에서와 같이 기본 또는 사용자 정의 유형으로 정의된 고정 유형을 가질 수 있습니다.
이 튜토리얼은 어떻게 React의 선택적 props를 기본값과 함께 사용할 수 있는지 보여줄 것입니다.
TypeScript의 선택적 소품
TypeScript에서 ?를 사용하여 유형 또는 소품을 선택 사항으로 만들 수 있습니다. 운영자. 이 사실은 React에서 선택적 매개변수를 전달하는 데 사용할 수 있습니다.
interface OptionalComponentProps {
color? : string;
title : string;
size? : number;
}
위의 예에서 특정 구성 요소의 props 유형 정의를 포함하는 color 및 size 속성은 선택 사항으로 정의됩니다.
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color , size, title} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
따라서 위의 예에서 상위 구성 요소는 App이고 Props 유형의 props는 Card 구성 요소로 전달됩니다. color 및 title 속성은 ?로 선택 사항으로 표시됩니다. 운영자.
선택적 속성이 구성 요소에 소품으로 전달되지 않으면 정의되지 않음으로 초기화되므로 표시되거나 렌더링되지 않습니다.
TypeScript의 기본값이 있는 선택적 소품
위의 예는 구성 요소와 함께 제공되는 기본값과 함께 사용할 수도 있습니다.
interface Props {
color? : string;
size: number;
title? : string;
}
function Card(props : Props){
const { color = 'red' , size, title = 'Default title'} = props;
return (
<div>
<div>{color}</div>
<div>{size}</div>
<div>{title}</div>
</div>
)
}
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
이전에는 color 속성이 기본값이 없었기 때문에 렌더링되지 않았지만 이제는 props로 전달되는 값이 없으므로 기본값을 사용하여 구성 요소를 렌더링합니다. 그러나 title 속성의 기본값은 구성 요소에 전달된 prop에 의해 재정의되기 때문에 사용되지 않습니다.
React의 defaultProps 속성을 사용하여 Props의 기본값 설정
React는 defaultProps 속성을 사용하여 전달된 props에 기본값 할당을 지원합니다. 구성 요소를 렌더링하는 동안 기본값을 직접 할당하여 사용할 수 있습니다.
interface Props {
color? : string;
size: number;
title? : string;
}
const defaultProps : Props = {
color :"red",
size : 20,
title : "A cool title"
}
function Card(props : Props){
return (
<div>
<div>{props.color}</div>
<div>{props.size}</div>
<div>{props.title}</div>
</div>
)
}
Card.defaultProps = defaultProps;
function App() {
return (
<div>
<Card size={20} title="Cool card" />
</div>
)
}
