props 기본값 설정

만약 props가 없을 때 기본값을 정할 수 있다.

const MyComponent = props => {
	return <div>안녕하세요, 제 이름은 {props.name}입니다</div>
};

MyComponent.defaultProps = {
	name: '기본 이름'
};
// 안녕하세요, 제 이름은 기본 이름입니다.

props children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있는데, 그것이 바로 children이다.

const App = () => {
	return <MyComponent>리액트</MyComponent>
};

const MyComponent = props => {
	return (
    	<div>
      		안녕하세요, 제 이름은 {props.name}입니다.
    		children 값은 {props.children}입니다.
      	</div>
    )
}
// 안녕하세요, 제 이름은 기본 이름입니다.
// children 값은 react입니다.

props 구조분해할당

props를 구조분해할당으로 받아도 children을 사용할 수 있다.

const App = () => {
	return <MyComponent>리액트</MyComponent>
};

const MyComponent = ({ name, children }) => {
	return (
    	<div>
      		안녕하세요, 제 이름은 {props.name}입니다.
    		children 값은 {props.children}입니다.
      	</div>
    )
}
// 안녕하세요, 제 이름은 기본 이름입니다.
// children 값은 react입니다.