props

props (properties) 컴포넌트 속성을 설정할 때 사용하는 요소.

<compoent elementname='blabla' />

component = ( props ) => {props.elementName}

defaultProps  > 기본으로 사용하려면 Component.defaultProps = { elementName = 'blabla'}

props.children > 컴포넌트 Tag 사이에 있는 내용을 보여주는 요소

비구조화 할당 문법을 통해 props 내부 값 추출 가능

const {name, children} = props; 을 사용하면 내부에 props 키워드 생략 가능.

 

propsTypes > props의 Type을 정해줄 수 있음. import PropTypes form 'prop-types'

component.propTypes = { elementName : PropTypes.string }

propTypes.isRequired = 경고문이 출력 됨.

 

PropTypes에서는 여러 가지 종류를 설정 가능하다.

array > 배열

arrayOf(다른 propType) > 특정 PropType으로 이루어진 배열을 의미 ex. arrayOf(PropTypes.number)는 숫자로 이루어진 배열

bool, func, number, object, string, sybol(ES6), any

node > 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX코드, children도 node PropType)

instanceOf(클래스) > 특정 클래스의 인스턴스

oneOf(['dog', 'cat') > 주어진 배열 요소 값 중 하나.

oneOfType([React.propTypes.string, PropTypes.number]) > 주어진 배열 안의 종류 중 하나

objectOf(React.PropTypes.number) > 객체의 모든 키 값이 인자로 주어진 PropType인 객체

Shape({name:PropTypes.string, num: PropTpyes.number }) > 주어진 스키마를 가진 객체