state

우선 기본 화면인 App.js 파일의 App class에 아래와 같이 작성하였다.

class App extends Coponent{
state={
 sampleText:'Hello World'
}
render(){
return(
<Text>{This.state.sampleText}</Text>
)
}
}

state는 컴포넌트에서 렌더링되는 데이터를 다룬다.

말이 어려운거 같지만, 쉽게 얘기하자면, 앱을 실행시킬때 출력되는 화면을 나타내는 데이터들을 다룬다는 말이다. state는 그만큼 중요하다. 위의 코드와 같이 render함수 밖에 state 구역을 만들어서 안에 sampleText라는 이름을 가진 state를 만들어 기본 값으로 Hello World를 주었다.

중요한 값이니 만큼 바로 직접 바꿀 수 없다. setState라는 메소드를 이용해서 state를 변경한다. 그래야만 state값이 갱신될때 화면이 렌더링돼서 화면에 새로운 정보들이 반영이 된다.

props

props는 수정,변경이 불가한 읽기 전용 property이다.
부모 class가 가지고 있는 데이터를 자식에게 간편하게 주기 위해서 props를 쓴다.
부모 class한테 받은 데이터를 자식마다 자유롭게 활용을 할 수 있으며, 부모의 데이터를 쉽게 받을 수 있다는 특징을 가지는 것이 props의 강점이다.

class App extends Component{
  state={
    appName:"My first App"
  }

  render(){
    return(
      <View>
        <Header name={this.state.appName}/> 
      </View>
    )
  }
}

예를 들면 부모 class에서 appName의 값이 "My first App"이라는 state를 가지고 있다.

이러한 코드에서 Header이라는 태그에 부모 객체 state의 appName을 name값에 넣어준다.

const Header=(props)=>(   //props로 부모의 정보를 받는다
    <View>
        <Text>{props.name}</Text>
    </View>
)

Header(자식)의 인자인 props로 부모의 데이터를 받고, 위에 부모가 전해줄때 사용했던 name이라는 이름으로 props.name하여서 부모가 준 appName값이 저 안에 들어가서 appName의 값인 "My first App"이 화면에 출력이 된다.