728x90
반응형
이번 포스팅에서는 state, props를 이용해 데이터를 전송하는 것만 배워보도록 하겠습니다.
이전 포스팅의 자료를 활용할 것입니다.
class App extends Component{
state = {
appName: 'My first app'
}
render(){
return (
<View style={styles.mainView}>
<Header name={this.state.appName}/>
<View style={styles.subView}>
<Text style={styles.mainText}>hello world</Text>
</View>
</View>
)
}
}
state를 생성해준 다음에 변수 이름을 지정해 줍니다.
헤더에 name이라는 속성을 지정하여 해당 변수를 내려줍니다.
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import { View,Text, StyleSheet } from 'react-native';
// jsx : javaScript xml
// const example = <tag>hello world</tag>
// jsx component를 리턴하므로 {} x () o
// jsx 리턴하는게 없다면 {} 쓰면 된다.
const Header = (props) => (
<View style={styles.header}>
<Text>this is header</Text>
<Text>{props.name}</Text>
</View>
)
const styles = StyleSheet.create({
header: {
backgroundColor: 'pink',
alignItems: 'center',
padding: 5,
width: '100%'
}
})
export default Header;
header.js 에서는 props라는 것으로 받게 되는데, props.name으로 받아줍니다. App.js에서 name으로 넘겨주었기 때문인 것 같은데 정확한 이유는 모르겠습니다.
끝.
728x90
반응형
'Dev > RN' 카테고리의 다른 글
8. [RN] 목록 만들어보기 (0) | 2021.01.30 |
---|---|
7. [RN] 버튼 만들어보기 (0) | 2021.01.29 |
5. [RN] 조각 붙이기 (0) | 2021.01.27 |
4. [RN] 스타일 꾸미기 (0) | 2021.01.26 |
3. [RN] Hello world! 띄우기 (0) | 2021.01.25 |