Props

• properties, 컴포넌트의 속성임
• 부모 컴포넌트에서 설정 가능함

1. JSX 내부에서 사용

const MyProps = (props) => {
	return <div>{props.name}</div>
}

• 부모 컴포넌트(App)가 있다는 전제임.
• props 렌더링 시 {}로 감싸줘서 사용하면 됨

2. 컴포넌트 사용할 때 props값 지정

const App = () => {
	return <MyProps name='react' />
}

3. 태그 사이의 내용을 보여주는 children

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

• 컴포넌트 태그 사이의 내용을 해당 컴포넌트에서 보여주기 위해서는 children을 사용해야 함

const MyProps = (props) => {
	return <div>children 값은 {props.children}</div>
}

출력 : children 값은 리액트

4. 비구조화 할당 문법을 통한 props 내부 값 추출하기

• 객체에서 값을 추출하는 문법

const MyProps = (props) => {
	const { name, children } = props;
	return (
    		<div>
            		이름은 {name},
            		children 값은 {children}
              	</div>
            )
}

• 내부 값을 바로 추출함
• 함수의 파라미터 부분에서도 사용 가능함(함수 파라미터가 객체라면 그 값을 바로 비구조화해서 사용 가능함)

const MyProps = ({name, children}) => {
	return (
    		<div>
            		이름은 {name},
            		children 값은 {children}
              	</div>
            )
}