index.js
```javascript=
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
// <App />, document.getElementById('root')
<App title={'Hell World'} />, document.getElementById('root')
);
```
App.js
```javascript=
class App extends Component {
render(){
return (
<div>
<h1>Hell World!</h1>
<h1>{this.props.title}</h1>
</div>
)
}
}
App.defaultProps = {
title: 'Hell Man'
}
export default App;
```
>위의 소스들은 create-react-app을 통해 만든 프로젝트를 베이스로 한다.
- 먼저, 상위 컴포넌트인 index.js에서 App을 불러올 때 속성으로 title이라는 것을 줬다.
- 하위 컴포넌트인 App에서 this.props를 이용하여 title을 받는 가장 기본적인 용법이다.
- 시험삼아 defaultProps를 주고 index의 주석을 토글해보니 잘 작동하더라.
- 덧, create-react-app으로 만들면 App은 원래 function으로 되어있을텐데, 이렇게 하면 당연한 소리지만 Component가 상속이 안돼서 this.props가 작동하지 않는다.
- 혹시몰라 해보니 안되더라.
