react native에서 부모 컴포넌트의 값인
변수, 함수 또는 state를 자식 컴포넌트가 사용하는 방법에 대하여 알아봅니다.
# react native 부모의 값 자식 컴포넌트 사용
먼저 부모가 가진 값을 자식 컴포넌트가 사용하는 방법으로
props를 이용할 수 있습니다. props를 사용하여 변수나 함수를 전달할 수 있으며 이때 사용 방법은 아래와 같습니다.
// app.jsimport 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를 호출하고 사용하는 방법에 대하여 알아보았습니다.