[React 기초] Props란

Props

 

Props는 수정 수정 변경이 불가한 읽기전용이다.
props는 부모 자식 관계가 형성되어야 의미가 있다.
왜냐면 부모 -> 자식으로 data가 전해지기 때문이다.
그래서 일방통행이다.

부모 컴포넌트로 전달받은 prop는 수정변경이 되지 않고 그대로 쓰이게 된다.

이걸 쓰는 이유는 부모하나만 만들면 자식들은 부모로부터 받기만 하면 되니 코드의 중복성을 제거할수 있다.

자 그럼 Props가 실제로 어떤역할을 하는지 알아보자.

 

일단 부모의 소스부터 보자.

 

부모소스

import PropsChild from './propsChild'

class App extends Component{

  state = {
    sampleText : 'Hello World',
    sampleBoolean : false,
    sampleNum : 1
  }


  changeState = () => {
    if(!this.state.sampleBoolean){
      this.setState({
        sampleText:'Text Changed!!!',
        sampleBoolean: true
      })      
    }else{
      this.setState({
        sampleText:'Hello World',
        sampleBoolean: false
      })  
    }
  }

  render(){
    return(
      <View>
        <PropsChild sampleText={this.state.sampleText} changeState ={this.changeState}/>
      </View>
    )
  }
}

위에 자식인 PropsChild를 import해서 쓰고
부모의 데이터인 sampleText와 함수인 changeState를 
자식에게 넘겨준다.

위를 넘겨 받은 자식의 소스를 보자.

 

자식 소스

 import React, {Component} from 'react';
 import {View, Text} from 'react-native'
 
const PropsChild = (props) => {
    return(
        <View>
            <Text onPress={props.changeState}>{props.sampleText}</Text>
        </View>
    )
}

 export default PropsChild;

위처럼 자식은 부모가 넘겨준걸 props 라는 인수를 통해 받고 props를 통해 부모가 넘겨준걸 사용할수 있다.
※props는 사용자가 이름을 지정하기 나름이다.

props의 장점은 부모의 데이터를 받아서 사용할수 있다는게 장점이다. 대신 변경이 불가능하다.