앱제작 3 - 함수형 컴포넌트 만들기

현재 reactnative는 주로 함수형 컴포넌트로 작성되고 있다. 

새로 나오는 많은 JS 라이브러리는 함수형에 대응해서 라이브러리가 많이 나옴

 

render 함수에서 어차피 컴포넌트를 조합해서 출력한다.

 해당 동작 자체가 함수로 동작한다. 

컴포넌트 자체를 함수로 만들면 되지 않을까 ? 

= '함수형 컴포넌트' 의 탄생

 

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Image, TextInput, Button, Alert, ScaolView,
  SafeAreaView, //아이폰 기종에 따른 위에 공백때문에
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import MenuInput from './components/MenuInput';
import MenuInputFunc from './components/MenuInputFunc';

export default function App() {
  return (

    <SafeAreaView>
      <ScrollView> 
        <View style={{height:300}}>

        </View>


        <MenuInput />
        <MenuInputFunc />
      </ScrollView>
    </SafeAreaView>
  );
}

 

 

 

MenuInputFunc.jsx

import React from 'react'; //component 클래스 필요 없다. 
import {
    StyleSheet, Text, View, Image, TextInput, Button, Alert, ScaolView,
    SafeAreaView, //아이폰 기종에 따른 위에 공백때문에
    ScrollView,
    TouchableOpacity,
} from 'react-native';

const MenuInputFunc = () => { //화살표 함수
    return(
        <View style={{ height: 300, alignItems: 'center' }}>

            <TextInput
                style={{
                    borderWidth: 1,
                    padding: 10,
                    width: "80%",
                    borderRadius: 5,
                    marginBottom: 20
                }}
                placeholder='메뉴입력' />

            <TouchableOpacity
                onPress={() => {
                    Alert.alert("커스텀 버튼 누르기");
                }}
                style={{ width: 100, backgroundColor: 'blue', alignItems: 'center', padding: 10, borderRadius: 10 }}>
                <Text style={{
                    color: 'white',
                    fontWeight: '900',
                    fontSize: 20
                }}>
                    함수형 메뉴 추가</Text>

            </TouchableOpacity>

        </View>

    );
}


export default MenuInputFunc;