웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react native

react native 부모 컴포넌트의 변수, 함수 사용하기

Last Modified : 2018-08-21 / Created : 2018-08-21
8,007
View Count
react native에서 부모 컴포넌트의 값인 변수, 함수 또는 state를 자식 컴포넌트가 사용하는 방법에 대하여 알아봅니다.




# react native 부모의 값 자식 컴포넌트 사용

먼저 부모가 가진 값을 자식 컴포넌트가 사용하는 방법으로 props를 이용할 수 있습니다. props를 사용하여 변수나 함수를 전달할 수 있으며 이때 사용 방법은 아래와 같습니다.

// app.js
import Test from './test.js'

export default Main extends React.component {
  render() {
    return (
      <View>
        <Test sitename="'Webisfree'"></Test>
      </View>
    )
  }
}

Main 컴포넌트는 부모 요소로 자식 컴포넌트에 props를 사용하여 "Webisfree" 값을 전달합니다. 자식 컴포넌트는 이를 받아 아래처럼 사용할 수 있습니다.
var sitename = this.props.sitename;

여기서는 전달받은 sitename의 props 값을 변수에 저장하였습니다. 변수값 뿐만 아니라 함수나 state도 동일하게 사용할 수 있습니다.



# 자식 컴포넌트에서 부모 함수 사용하기

부모의 함수를 자식컴포넌트에서 호출한다면 아래처럼 사용합니다.
// app.js
import Test from './test.js'


export default Main extends React.component {
  greeting() {
    Alert.alert("Hi");
  }

  render() {
    return (
      <View>
        <Test greeting="this.greeting"></Test>
      </View>
    )
  }
}

이번에는 props에서 함수 greeting을 전달받았습니다. 이제 아래처럼 부모의 함수를 호출할 수 있습니다.
this.props.greeting();

이제 부모의 함수를 호출하여 "Hi" 메시지를 출력할 수 있게되었습니다.

여기까지 부모의 변수나 함수... state를 호출하고 사용하는 방법에 대하여 알아보았습니다.

Previous

하이브리드앱? React Native 알아보기

Previous

react native standalone 방법으로 apk 만들기