<Mycomponent name="heyhey"/>
→ 부모 컴포넌트에서 넘겨주기const MyComponent = **props** =>{
return <div>하이 {props.name}이야</div>}
→ props.children
을 사용해서 사용가능
<Mycomponent>여기적히는값</Mycomponent>
const Mycomponent = (props) =>{
return <div> **{props.children}**</div>
}
Mycomponent.defaultProps={
name:'기본값'
}
const Mycomponent = (props) =>{
const {name,children} =props;
return ..
}
const Mycomponent = ({name,children}) =>{
return ..
}
PropTypes
를 사용한다.import PropTypes from 'prop-types'
(..)
Mycomponent.propTypes ={
name:PropTypes.string
}
→ name에 string이 아닌 int가 적히면 console에 err 출력**isRequired
** 를 사용해 필수 propTypes 설정Mycomponent.propTypes ={
name:PropTypes.string,
num:PropTypes.number.isRequired
}
isRequired
를 적어주면, num을 설정 안하면 err 출력 숫자 넘길때 num={2}
이런 형태로 넘겨야 한다 number
대신 array, func, object, oneOf(['dog','cat']) ..
가능 더 자세한 propTypes는 여기에서 확인this.props
로 불러오기const {name,num,children} = props;
const {name,num,children} = this.props
import React,{Component} from 'react'
class Mycomponent extends Component{
render(){
const {name,num,children} = this.props
return(
<div>{name}{num}{children}</div>
)
}
}