react 기초 배우기 003 - props

props

• props는 readonly, 읽기전용 property, 수정/삭제 불가
• 데이터는 일방향, 부모 > 자식

• 데이터는 수정되지 않고 그대로 자식 컴포넌트에서 쓰임

  // propsChild.js
  import React, { Component } from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  
  const PropsChild = (props) => {
    return {
      <View>
        // onPress 에 childChangeText 를 사용
        <Text onPress={props.childChangeText}>
          <!-- 내용에 childSampleText 사용 -->
          {props.childSampleText}
        </Text>
      </View>
    }
  }
    
  export default PropsChild;
  

  // App.js
  import React, { Component } from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  // propsChild 선언
  import PropsChild from './propsChild';
    
  class App extends Component {
  
    changeText = () => {
      if (!this.state.sampleBoolean) {
        this.setState({
          sampleText: 'Text Changed!!!',
          sampleBoolean: true
        })
      } else {
        this.setState({
          sampleText: 'Hello World!!!',
          sampleBoolean: false
        })
      }        
    }
  
    render() {
      return (
        <View style={styles.background}>
          <!-- PropsChild로 props 전달 -->
          <PropsChild childSampleText={this.state.sampleText} childChangeText={this.changeText}/>
        </View>
      )
    }
  }
  
  const styles = StyleSheet.create({
    background: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center'
    }
  })
  
  export default App;
  

참고

• https://www.inflearn.com/course/리액트-네이티브-기초