pros는 properties 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다
props는 직접 조작 할 수 없으며 부모 컴포넌트에서 받아온 데이터를 하위 컴포넌트에 전달해 렌더링합니다
const App () => {
const name = '리아';
<ChildComponent name={name} />
}
export default App;
const ChildComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name} 입니다<div>
}
export default ChildComponent;
만약 prop의 기본값을 정해주고 싶다면 defautProps 프로퍼티로 설정을 해주면 됩니다
const ChildComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name} 입니다<div>
}
ChildComponent.defaultProps = {
name :"홍길동"
}
export default ChildComponent;
const App () => {
const name = '리아';
<ChildComponent name={name}>
{/* children 삽입 영역 */}
리액트를 배우고 있는 중입니다
</ChildComponent>
}
const ChildComponent = (props) => {
return (
<div>
<p>안녕하세요, 제 이름은 {props.name} 입니다</p>
{/* children 출력 */}
<p>{props.children}</p>
<div>
)
}
export default ChildComponent;
const App () => {
const name = '리아';
<ChildComponent name={name} age="20" />
}
export default App;
const ChildComponent = (props) => {
const {name, age} = props;
return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}
export default ChildComponent;
{/*함수 파라미터에서 구조분해할당도 가능 */}
const ChildComponent = ({name, age}) => {
return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}
export default ChildComponent;
props의 타입을 지정하거나 필수로 설정해야 할때 사용합니다
import PropTypes from 'prop-types';
const ChildComponent = ({name, age}) => {
return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}
ChildrenCompoent.propTyes = {
name : PropTypes.string,
age: PropTypes.number
}
export default ChildComponent;
필수로 지정하고 싶을때는 .isRequired
를 추가 작성 해주면 됩니다
ChildrenCompoent.propTyes = {
name : PropTypes.string.isRequired,
age: PropTypes.number
}