[React Native] 재사용 가능한 Component

1. 재사용 가능한 Component

재사용이 가능한 Component는 다음과 같이 적용할 수 있다. 쉽게 말해, 기본 템플릿에 나만의 색상을 다르게 적용하는 느낌이다. 즉, 기본 템플릿을 사용할 수도 있고, 기본 템플릿에 개별적으로 스타일, 텍스트 등을 수정할 수 있는 재사용한 Component로 설계를 할 수 있다.

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Supertext from './src/utils/supertext'

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Supertext>Hello World 1</Supertext>

        <Supertext
          style={{backgroundColor: 'red'}}
        >
          Hello World 2
        </Supertext>
      </View>
    )
  }
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#BBB',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50
  }
});

export default App;

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

const Supertext = (props) => {
    return (
        <Text 
            style={[styles.supertext, props.style]}
        >
            {props.children}
        </Text>
    )

}

const styles = StyleSheet.create({
    supertext: {
        backgroundColor: 'skyblue',
        fontSize: 25,
        color: 'blue',
        padding: 15,
        width: 300
    }
});

export default Supertext;