기초 다지기
hello world
import React from 'react';
import {Text, View} from 'react-native';
const HelloWorldApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default HelloWorldApp;코드 분석
JSX를 사용가능하게 하기 위해React를 import해주어야 한다. (각 플랫폼의 native components로 변환해주기 위한 JSX)- 2번째 줄에서
react-native에서Text와Viewcomponent를 import 해줍니다.
그러면 우리는 HelloWorldApp 함수를 발견할 수 있는데, 이 함수는 functional component이고, 웹에서 사용하는 React와 같은 방식으로 동작한다. 이 함수는 스타일 요소와 Text를 자식으로 가지고 있는 View를 return 한다.
Text 는 View가 container를 렌더링하는 동안 텍스트를 렌더링할 수 있도록 한다. 이 container는 여러가지 styles이 적용되어 있는데, 각각이 무엇을 하는지 분석하도록 하자.
첫번째 스타일인 flext: 1에서, flex는 주요 축을 따라 사용 가능한 공간에 항목을 "채우는" 방법을 정의합니다. 우리는 하나의 container만 가지기 때문에 부모 컨테이너의 가용 공간을 모두 차지하게 됩니다. 이런 경우, 이 componenet만 있기 때문에, 사용가능한 화면 공간을 모두 사용할 것이다.
다음 스타일인 justifyContent: "center"는 컨테이너의 중심축의 중앙에 하위 컨테이너를 정렬합니다. 마지막으로, alignItems: "center"는 컨테이너의 가로축의 중앙에 하위 컨테이너를 정렬합니다.
여기 있는 것들 중 몇몇개는 JavaScript 처럼 보이지 않을 수 있다.
이건 ES2015의 문법을 지원하기 때문에 ES2015가 익숙하지 않다면 해당 튜터리얼 페이지를 가서 참고하길 바란다. (필자는 익숙치 않기때문에 이것과 마찬가지로 정독하는 글을 한번 쓸 예정이다.)
또 다른 특이한 점은 JavaScript에 XML을 내장하기 위한 구문인 <View><Text>Hello world!</Text></View> JSX입니다. 웹에서 사용하는 <div>나 <span>이 View로 표현된것이다.
Components
이 코드는 새로운 Component인 HelloWorldApp을 정의하고 있다. React Native 앱을 설계할때, 새로운 컴퍼넌트를 많이 생성하게 될 것이다. 화면에서 보이는 것이 component의 일종이다.
Props
대부분의 component는 서로 다른 파라미터를 사용해 생성될때 커스텀할 수 있습니다. 이러한 생성 파라미터를 props라고 부릅니다.
자신의 component도 props를 사용할 수 있습니다. 이렇게 하면 앱의 여러 위치에서 사용되는 단일 component를 만들 수 있습니다. 함수 컴퍼넌트에서 props.YOUR_PROP_NAME 을 참조하거나 클래스 컴퍼넌트에서 this.props.YOUR_PROP_NAME을 참조할 수 있습니다.
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
center: {
alignItems: 'center'
}
})
const Greeting = (props) => {
return (
<View style={styles.center}>
<Text>Hello {props.name}!</Text>
</View>
);
}
const LotsOfGreetings = () => {
return (
<View style={[styles.center, {top: 50}]}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
export default LotsOfGreetings;Greeting컴퍼넌트의 prop을 커스텀하여 name을 사용한다, 그래서 우리는 각 greeting에서 컴퍼넌트를 재사용할 수 있다.
또 다른 새로운 기능은 View 컴퍼넌트입니다. View는 스타일과 레이아웃을 컨트롤하기 위해 다른 컴퍼넌트에 대한 컨테니어로 유용합니다.
props, Text, Image, View 컴퍼넌트를 이용해, 다양한 정적 화면을 구성할 수 있다. 시간이 지남에 따라 앱을 변경하는 법을 배우려면 State에 대해 알아야 합니다.
State
수정이 불가능하고 read-only인 props와는 달리, state는 React 컴퍼넌트를 사용자 작업, 네트워크 응답 등에 대한 응답으로 시간에 따라 변경할 수 있습니다.
React에서 state와 props의 차이점은?
React 컴퍼넌트에서, props는 상위 컴퍼넌트에서 하위 컴퍼넌트로 전달되는 변수입니다. 비슷하게, state도 변수다, 하지만 파라미터로 전달되는 것이 아니라 컴퍼넌트가 내부적으로 초기화하고 관리한다는 차이점이 있다.
// React Native Counter Example using Hooks!
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text>You clicked {count} times</Text>
<Button
onPress={() => setCount(count + 1)}
title="Click me!"
/>
</View>
);
};
// React Native Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});(여기서 hook은 또 무엇이냐.. 그건 또 다시 알아봐야 할 것 같다..)
다음 예에서는 위의 카운터 예제를 클래스를 사용한 방법으로 보여주겠다.
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
class App extends Component {
state = {
count: 0
}
onPress = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text>Click me</Text>
</TouchableOpacity>
<View>
<Text>
You clicked { this.state.count } times
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
marginBottom: 10
}
})
export default App;끝!
