3장. 컴포넌트

props 기본값 설정: defaultProps

//MyComponent.js
const MyComponent = props =>{
{...}
}

//이렇게 적어주면 props로 name을 못 받아올 시 정해진 값으로 default 값을 넣어줌. 
MyComponent.defaultProps = {
	name: '기본 이름'
}

태그 사이의 내용을 보여 주는 Children

//MyComponent.js
const MyComponent = props =>{
	return (
    <div>
    {props.children}  //이렇게 해주면 자식 컴포넌트에서 Mycomponent 태그 사이에 넣어준 JSX가 넘어오게 됨.
		{...}
    </div>
	)
}

비구조화 할당

//MyComponent.js
const MyComponent = props =>{
const {name, children} = props; //이렇게 props 값을 한번에 추출해오는 방식을 말함.
{...}
}

propTypes를 통한 props 검증

//MyComponent.js
import PropTypes from 'prop-types';

const MyComponent = props =>{
const {name, children} = props; //이렇게 props 값을 한번에 추출해오는 방식을 말함.
{...}
}

이렇게 props 타입들을 typescript 마냥 검사하는 방식도 있다.
MyComponent.propTypes = {
	name: PropTypes.string
    children: ~~~~~~~
};

종류

array: 배열

func: 함수

number: 숫자

object: 객체

string: 문자열

oneOf(['dog', 'cat']): 주어진 배열 요소 중 하나

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

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