[React Native] Components(1)

리액트 네이티브는 리액트와는 다른 내장 Component 체계를 가지고 있다. Component 모두를 react-native에서 import 해와 사용 할 수 있다.

Component란? 재사용이 가능한 조립 가능한 블록으로 화면에 나타나는 UI 요소를 뜻한다.

이번 포스팅에선 RN에 내장 되어 있는 Component들을 이야기 해볼까 한다.

---

View와 Text

import React, { Component } from 'react';
import {View, Text} from 'react-native';

class App extends Component{
  render(){
    return(
      <View>
        <Text>hello world</Text>
      </View>
    )
  }
}

export default App;

• View와 Text 모두 RN의 패키지 내에서 가져온 내장 Component들이다.
• <View>는 다른 컴포넌트들을 감싸주는 역할을 한다. View 태그가 존재 하지 않으면 Client side에선 UI로 표시 되지 않는다.
• <View>는 여러개를 작성 해도 무관하다.

---

Style

RN에서 스타일을 줄 수 있는 방법은 2가지이다. 리액트와 동일한 방식인데 첫 번째는 Inline Styling 방식이다.

import React, { Component } from 'react';
import {View, Text} from 'react-native';

class App extends Component{
  render(){
    return(
      <View style={{
        backgroundColor: 'green',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%'
      }}>
        <Text>hello world</Text>
      </View>
    )
  }
}

export default App;

• Inline Styling에서 중괄호 두 개는 각각 다음 역할을 한다.
  
  • 1. JSX를 표현한다.
  • 2. 객체를 표현한다.
• View tag는 화면을 채우는 Container 역할을 한다고 볼 수 있다.

다음은 Inline 방식이 아닌 따로 빼서 사용하는 방법을 알아보자.

import React, { Component } from 'react';
import {View, Text, StyleSheet} from 'react-native'; //StyleSheet를 Import 해와야 한다.

class App extends Component{
  render(){
    return(
      <View style={styles.mainView}>
        <Text>hello world</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainView:{
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%'
  }
})

export default App;

• 먼저 react-native 모듈에서 StyleSheet를 Import 해온다.
• StyleSheet에 create를 메서드 체이닝 하여 객체들을 만들어준다. 
• mainView라는 객체를 만들어 준 후 태그 안에서 mainView 객체를 연결 해주는 과정을 거치면 연결이 된다.

---

Touch Event

 

import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'; //StyleTouchableOpacityf를 Import 해와야 한다.

class App extends Component {

    state ={
        appName: 'My First App'
    }

  render() {
    return (
      <View style ={styles.mainView}>
        <TouchableOpacity onPress={()=>alert('hello world')}>
          <View>
            <Text>{this.state.appName}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
});

export default App;

• Touchable 컴포넌트와 TouchableOpacity라는 컴포넌트를 통해 터치를 구현할 수 있다.

• 다음 코드에서 inline에 Arrow Function으로 Alert문을 작성 해 주었다. 
• onPressIn, onPress, onPressOut, onLongPress 등등 다양한 touch 이벤트를 지원하고 있다.

---

Button

import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native'; //StyleSheet를 Import 해와야 한다.

const Generator = (props) => {
  return (
    <View style={styles.generator}>
      <Button title="Add Number" onPress={()=>props.add()}/>
    </View>
  )
}
const styles = StyleSheet.create({
  generator:{
    backgroundColor: '#782347',
    alignItems: 'center',
    padding: 5,
    width: '100%',
  }
});

export default Generator;

• Button도 React Component쓰듯이 제작하여 사용하면 된다, title 값이 필수로 필요하다는 점이 중요하다.
• Button의 default design 같은 경우 Android와 IOS의 디자인이 다르다는 것을 유의해야 한다.

---

ScrollView

import React, {Component} from 'react';
import {View, Text, StyleSheet, ScrollView} from 'react-native'; //ScrollView를 Import 해와야 한다.

class App extends Component {
  render() {
    return (
      <View style ={styles.mainView}>
        <ScrollView>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
          <Text style={styles.textStyles}>ssd</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    flex: 1,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  textStyles:{
    fontSize: 50,
  }
});

export default App;

• 말 그대로 Scroll View이다.
• onMomentumScrollBegin, onMomentumScrollEnd, onScroll, onmContentSizeChange, bounces 같은 property를 가지고 있다.