앱제작 2 - 클래스형 컴포넌트 만들기

1. app.js 파일에서 메뉴를 받을 수 있는 MenuInput 파일을 import 한다. 

ScrollView 태그 안에

<MenuInput /> 을 통해 불러오기 한다. 

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';

export default function App() {
  return (

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

        </View>

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

 

 

2. MenuInput.jsx 파일에서 메뉴를 추가하는 컴포넌트를 작성한다. 

2-1) 우선, 필요한 리액트 컴포넌트들을 임포트해준다. 

import React, {Component} from 'react';

2-2) Component 클래스 상속한다. 

class MenuInput extends Component{

 

2-3) 위 상속된 MenuInput 클래스 내에 render 해준다. 

render은 App,js 파일에서 클래스가 불러질때 함께 실행해달라는 뜻, return 은 결과값 반환

render(){

   return(

 

~~ 이 안에 작성한다.~~ 

 

   );

}

2-4) export 해준다 (외부로 내보내줌)

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

  //클래스형 컴포넌트로 만들어보기 

  class MenuInput extends Component{ // 리엑트에서 제공하는 컴포넌트 클래스를 상속하여 MenuInput이라는 컴포넌트를 만든다. 

    render(){
        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 MenuInput; //외부로 내보낸다는 뜻