1. Props

• props : properties(속성)
• 컴포넌트의 속성값을 말하며, 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이다.
• props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다.

1.1 JSX 내부에서 props 렌더링

• props 값은 컴포넌트 함수의 파라미터로 받아와서 사용이 가능하다.

import React from 'react';

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

export default MyComponent;

1-2. 컴포넌트를 사용할 때 props 값 지정하기

• App.js

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="React" />;
};

export default App;

1-3. props 기본값 설정: defaultProps

• props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 defaultProps

• MyComponent.js

import React from 'react';

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

MyComponent.defaultProps = {
	name: 'default name';
};

export default myComponent;

1-4. 태그 사이의 내용 children

• 태그 사이에 문자열을 보여주는 경우

• App.js

{props.children}