props란 properties의 줄인 표현으로 컴포넌트 속성값이다.
부모컴포넌트가 자식컴포넌트에게 데이터와 기능을 넘겨줄 때 사용한다.
💻 jsx내부에서 { }로 감싸주면 끝!
const MyComponent = props =>{
return <div> 제 이름은 {props.name}입니다.</div>;
};//name이라는 props를 렌더링!
MyComponent.defaultProps = {
name: '신유진'
};
export default MyComponent;
// 제 이름은 신유진 입니다.
컴포넌트 태그 사이에 넣은 값을 보고 싶을 때 props.children 을 사용
//자식
import MyComponent from "./MyComponent";
const App = () =>{
return <MyComponent>수박이</MyComponent>;
}
ewport default App;
//부모
const MyComponent = props =>{
return <div> 제 이름은 {props.name}입니다.
우리집 강아지 이름은 {props.childred}입니다.</div>;
};
MyComponent.defaultProps = {
name: '신유진'
};
export default MyComponent;
// 제 이름은 신유진 입니다.
//우리집 강아지 이름은 수박이 입니다.