React & React Native Component

컴포넌트(Component)

• 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소
• 부모로부터 받은 속성(Props)나 자신의 상태(State)에 따라 표현이 달라지고 다양한 기능을 수행
• (내장 컴포넌트) 

https://reactnative.dev/docs/components-and-apis (View, Text 등)

Core Components and APIs · React Native

https://reactnative.dev/docs/button 

Button · React Native

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';


export default function App() {
  const name = "IRONMAN";
  const age = 100;
  return (
    <View 
      style = {{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style = {{fontSize: 30, marginBottom: 10}}>Button Component</Text>
      <Button title = "Button" onPress = {() => {alert("Click!!!!")}}></Button>
    </View>
  );
}

https://reactnative.dev/docs/button#color 

Button · React Native

• (커스텀 컴포넌트)

import React from "react";
import {Text, TouchableOpacity} from 'react-native';

const MyButton = () => {
  return (
    <TouchableOpacity>
      <Text style = {{fontSize: 24}}>My Button</Text>
    </TouchableOpacity>
  );
};
 
export default MyButton ;

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import MyButton from './src/MyButton'


export default function App() {
  return (
    <View 
      style = {{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style = {{fontSize: 30, marginBottom: 10}}>My Button Component</Text>
      <MyButton></MyButton>
      {/* <Button title = "Button" onPress = {() => {alert("Click!!!!")}}></Button> */}
    </View>
  );
}

• TouchableOpacity 컴포넌트: https://reactnative.dev/docs/touchableopacity

TouchableOpacity · React Native

• TouchableWithoutFeedback 컴포넌트: https://reactnative.dev/docs/touchablewithoutfeedback

TouchableWithoutFeedback · React Native