Dev/RN

6. [RN] state, props를 이용해 데이터 전달하기

VIPeveloper 2021. 1. 28. 19:55
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으로 넘겨주었기 때문인 것 같은데 정확한 이유는 모르겠습니다.

header에서 데이터를 쓸 수 있게되었다.

 

끝.

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