React Study

this.props

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가 작동하지 않는다.

- 혹시몰라 해보니 안되더라.

댓글

댓글 본문
작성자
비밀번호
버전 관리
학살공자
현재 버전
선택 버전
graphittie 자세히 보기