HybridApp-React Native 2세대 (설치 및 간단한 예제)

1세대 Cordova는 느려서 React Native로 사용을 한다.

[cordova와 똑같이 웹기술만으로 쉽게 앱을 만들 수 있다.]

<최종화면>

---

리액트네이티브 최초 설치 및 실행순서_windows_android기준.txt

0.00MB

위 설치 메모장을 보면 이전에 Cordova를 설치할때 했던 행동들이다. 그래서 그냥 개발로 바로 가능하다.

 

npm은 최신버전이 안될 수 있다. 그래서 그때그때 적용이 되는 npx를 사용하자. 해당 사이트에서도 npx를 권장.

( npm에서 버그가 발견된 것이, npx에서는 최신 버전이 반영되어 버그가 개선되었다.)

 

#### nodeJS 버전 업 하면서 npx 등장 및 사용권장. ###################################

   - npm과 다르게 일회용설치 같은 개념.  [전역으로 react-native명령어를 사용할 수 있음]   
   - 매 명령 작업마다 그때 그때 설치하는 개념.
   - react-native명령을 수행할 때 마다 앞에 npx 키워드를 붙여서 사용.

  * 장점 *
  - 옵션으로 버전번호를 추가하여 특정 버전으로 실행되도록 할 수 있음.
  - 항상 자동으로 그 순간의 최신버전으로 설치되기에 버전변화에 쉽게 대응할 수 있음.
  - npm은 한번 설치하면 다음부터는 npm키워드 없이 사용 가능하지만 설치형이므로 최신버전으로 자동 갱신되거나 하지 않음.

  * 단점 *
  - 그때그때 react-native를 다운로드하여 실행하므로 실행시 오래걸림.. 
 ########################################################################################

 

설치하는 방법은 달라질 수 있다. 설치 사이트를 우선 알아보자.

https://facebook.github.io/react-native/

React Native · A framework for building native apps using React

위 페이지에서 잘 읽어보자.

(그러나 해당 사이트를 읽어보면 Cordova 설치할때 했던 것들이다. 그래서 따로 설치는 안한다.)

이제 작업할 폴더를 만들자. 예제에서는 D:HybridApp에 ReactNative 폴더를 만들었다.

미리 AVD를 켜놓자.

명령어 : npx react-native run-android

node 창이 애뮬레이터랑 연결된거고 제어하는 역할임

cmd는 명령이 안끝난 상태일 것이다. 왜냐 node창을 실행하고 있기 때문에..

 

(하이브리드 앱 문법은 Day14_ES6 참고)

 

이제 코드를 작성하기 전에 

Android 와 비슷하 구조를 알아보자.

 

app.js => MainActivity
app.json  => value - string
index.js => AndroidManifest.xml
package.json 
Component (클래스명) => Activity,View

RN01MyApp폴더 안에 새로운 파일(MyApp.js)을 만들자.

MyApp.js

// 리액트 라이브러리 사용
import React, { Component } from 'react'; //구조분해할당
// 리액트 네이티브 라이브러리 클래스들 import
import {Text, View, Button} from 'react-native';
 
// 리액트 네이티브에서는 Component를 상속받은 클래스들이 화면에 보여질 수 있음.
class MyApp extends Component{
    //리액트의 Component클래스가 화면에 보여줄 뷰를 그려내는 작업 메소드(onDraw같은 메소드)
    // 이 메소드 안에서 JSX(Javascript XML)언어로 뷰를 설계하고 이를 return해주면 됨
    render(){
 
         return <Text>Hello ReactNative</Text>;
        
        );
 
    }//render..
 
}// class..
 
 
// MyApp클래스를 다른 문서에서 사용하려면 export 해줘야함 [index.js에서 처음 실행되는 Component로 등록하고자 함]
export default MyApp;

처음에 실행되는 Component를 바꾸자.

/**
 * @format
 */
 
//  자바의 import와 같은 역할
import {AppRegistry} from 'react-native'; //.js 생략 가능
import App from './App';//.js 생략 가능
import MyApp from './MyApp';
import {name as appName} from './app.json';
 
// 처음 실행되는 Component(Activity, View와 같은 역할)를 지정.
// 첫번째 파라미터 : 프로젝트 이름
// 두번째 파라미터 : 처음 실행할 컴퍼넌트를 리턴해주는 콜백함수
// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => MyApp);
 

여러 <Text>태그문을 return안에 사용하면 error

여러 compnent를 사용하려면 <View>안에 배치시키자. 리턴은 하나만 가능하다.

변수 사용도 알아보자. 변수의 구분은 {}로 한다. 이때의 {}와 지역을 의미하는 {}는 다르다.

스타일 적용에 대해 알아보자. 직접 태그문에 적용 가능하다.

스타일 적용이 많다면, 따로 전역 변수를 사용해서 적용 가능하다.

버튼에 스타일은 예외이다. 전역변수로 스타일을 주면 적용되지 않는다. (스타일이 존재하지 않음)

그래도 적용 방법이 있다.

스타일을 그룹화해서 관리하는게 가독성도 좋고해서 그렇게 사용한다.

MyApp.js

// 리액트 라이브러리 사용
import React, { Component } from 'react'; //구조분해할당
// 리액트 네이티브 라이브러리 클래스들 import
import {Text, View, Button, StyleSheet} from 'react-native';
 
// 리액트 네이티브에서는 Component를 상속받은 클래스들이 화면에 보여질 수 있음.
class MyApp extends Component{
    //리액트의 Component클래스가 화면에 보여줄 뷰를 그려내는 작업 메소드(onDraw같은 메소드)
    // 이 메소드 안에서 JSX(Javascript XML)언어로 뷰를 설계하고 이를 return해주면 됨
    render(){
 
        // render()메소드 안에 지역변수 선언
        let name= "SAM";
        let btnTitle="click me";
 
        let a='./images/ms19.png';
        // return <Text>Hello ReactNative</Text>;
        // 여러줄로 xml을 작성하려면 ()가 필요함
        return (
            // <Text>Hello ReactNative</Text>
            // return()안에 2개 이상의 Component는 리턴할 수 없음
            // <Text>Hello ReactNative</Text>
 
            // 2개 이상을 리턴하려면 ViewGroup의 역할을 수행하는 Component가 있어야함(웹에서의 <div>같은 역할)
            // 안드로이드와 다르게 Layout을 사용하지 않고 그냥 View컴포넌트 사용
            // View를 import해야함
            // <View>
            //     <Text>Hello ReactNative</Text>
            //     <Text>Nice to meet you</Text>
            //     <Button title="button"></Button>
            // </View>
 
            // 텍스트에 보여줄 글씨를 변수의 값으로 보여주기
            // JSX언어의 특징은 <>태그문 중간에 Javascript의 변수 사용이 가능하다는 것임
            // {}는 php $와 같은 의미로 변수를 구분할때 사용하는 것이다.
            // <View>
            //     <Text>Hello {name}</Text> 
            //     <Text>Nice to meet you</Text>
            //     <Button title={btnTitle}></Button>
            // </View>
 
            // 그냥 만드는건 안이쁨. 스타일 적용하기
            // style속성을 통해 꾸미기 - 속성 값 적용방법이 css와 다소 다름
            // style속석의 값은 객체로 제공되어야 함. 첫번째 {}는 script처럼 문법을 쓴다. 두번째는 {}객체라서 사용
            // flex(축약형 -grow - shrink - basis)   flex:1-grow만 작성해도 됨
        // <View style={rootContainerStyle}>
        //     <Text style={textStyle}>Hello {name}</Text> 
        //     <Text style={plainTextStyle}>Nice to meet you</Text>
        //     {/* Button컴포넌트는 style 속성이 존재하지 않음. */}
        //     {/* <Button title={btnTitle} style={btnSyle}></Button> */}
        //     {/* 버튼의 색상은 color속성으로 */}
        //     <Button title={btnTitle} color='#841584'></Button>
        //     {/* 굳이 margin같은 스타일을 적용하려면..  */}
        //     {/* 버튼을 감싸는 뷰를 이용함 */}
        //     <View style={{marginTop:10, width:150}}>
        //         <Button title={btnTitle} color='orange'></Button>
        //     </View>
            
        // </View>
 
           스타일 여러개를 하나의 객체에 모두 설정하여 사용하기
           StyleSheet 클래스 이용
           <View style={styles.root}>
               <Text style={styles.mainText}>Hello RN</Text>
               <Text style={styles.plainText}>Nice to meet you.</Text>
               <Button title={btnTitle} color="orange"></Button>
           </View>
 
        
 
        );
 
    }//render..
    
}// class..
 
// 스타일 변수들을 하나의 객체에 모아서 만들기
const styles=StyleSheet.create({
    root : {
        backgroundColor: '#AAFFCC',
        flex: 1,
        padding : 16,       
    },
    mainText: {
        color:'blue',
        fontSize: 20,
        fontWeight: 'bold',
        margin: 16,
    },
    plainText:{
        margin:8,
        color: '#333333',
    },
 
});
 
// MyApp클래스 밖에 변수를 선언하면 전역변수[물론, 이 MyApp.js안에서만]
const rootContainerStyle={
    backgroundColor: "#AAFFCC",
    flex:1,
    padding:16,// 단위는 기본 dp
 
    // 컴포넌트들을 가로 축 가운데 정렬하고 싶다면
    // 현재 flex-direction에 해당하는 세로 방향의 반대축 정렬인 align-items속성 사용
    // alignItems:'center',
};  
 
// 글씨스타일 객체
const textStyle={
    color:'#FF0000',
    fontSize:20,
    fontWeight: 'bold',
    margin:16, //마지막에 , 있어도 되고 없어도 무방
}
 
// 일반글씨 스타일
const plainTextStyle={
    margin:8,
    color: '#333333',
}
// 버튼 스타일
const btnSyle={
    margin:50,
    color:'#FF0000'
}
 
// MyApp클래스를 다른 문서에서 사용하려면 export 해줘야함 [index.js에서 처음 실행되는 Component로 등록하고자 함]
export default MyApp;

이제 이미지를 띄워보자.

RN01MyApp폴더에 images 폴더를 만든다. 거기에 임의 이미지 파일을 추가하자.

---

<복붙용 코드>

MyApp.js

// 리액트 라이브러리 사용
import React, { Component } from 'react'; //구조분해할당
// 리액트 네이티브 라이브러리 클래스들 import
import {Text, View, Button, StyleSheet, Image} from 'react-native';
 
// 리액트 네이티브에서는 Component를 상속받은 클래스들이 화면에 보여질 수 있음.
class MyApp extends Component{
    //리액트의 Component클래스가 화면에 보여줄 뷰를 그려내는 작업 메소드(onDraw같은 메소드)
    // 이 메소드 안에서 JSX(Javascript XML)언어로 뷰를 설계하고 이를 return해주면 됨
    render(){
 
        // render()메소드 안에 지역변수 선언
        let name= "SAM";
        let btnTitle="click me";
 
        let a='./images/ms19.png';
        // return <Text>Hello ReactNative</Text>;
        // 여러줄로 xml을 작성하려면 ()가 필요함
        return (
            // <Text>Hello ReactNative</Text>
            // return()안에 2개 이상의 Component는 리턴할 수 없음
            // <Text>Hello ReactNative</Text>
 
            // 2개 이상을 리턴하려면 ViewGroup의 역할을 수행하는 Component가 있어야함(웹에서의 <div>같은 역할)
            // 안드로이드와 다르게 Layout을 사용하지 않고 그냥 View컴포넌트 사용
            // View를 import해야함
            // <View>
            //     <Text>Hello ReactNative</Text>
            //     <Text>Nice to meet you</Text>
            //     <Button title="button"></Button>
            // </View>
 
            // 텍스트에 보여줄 글씨를 변수의 값으로 보여주기
            // JSX언어의 특징은 <>태그문 중간에 Javascript의 변수 사용이 가능하다는 것임
            // {}는 php $와 같은 의미로 변수를 구분할때 사용하는 것이다.
            // <View>
            //     <Text>Hello {name}</Text> 
            //     <Text>Nice to meet you</Text>
            //     <Button title={btnTitle}></Button>
            // </View>
 
            // 그냥 만드는건 안이쁨. 스타일 적용하기
            // style속성을 통해 꾸미기 - 속성 값 적용방법이 css와 다소 다름
            // style속석의 값은 객체로 제공되어야 함. 첫번째 {}는 script처럼 문법을 쓴다. 두번째는 {}객체라서 사용
            // flex(축약형 -grow - shrink - basis)   flex:1-grow만 작성해도 됨
        // <View style={rootContainerStyle}>
        //     <Text style={textStyle}>Hello {name}</Text> 
        //     <Text style={plainTextStyle}>Nice to meet you</Text>
        //     {/* Button컴포넌트는 style 속성이 존재하지 않음. */}
        //     {/* <Button title={btnTitle} style={btnSyle}></Button> */}
        //     {/* 버튼의 색상은 color속성으로 */}
        //     <Button title={btnTitle} color='#841584'></Button>
        //     {/* 굳이 margin같은 스타일을 적용하려면..  */}
        //     {/* 버튼을 감싸는 뷰를 이용함 */}
        //     <View style={{marginTop:10, width:150}}>
        //         <Button title={btnTitle} color='orange'></Button>
        //     </View>
            
        // </View>
 
        // 스타일 여러개를 하나의 객체에 모두 설정하여 사용하기
        // StyleSheet 클래스 이용
        // <View style={styles.root}>
        //     <Text style={styles.mainText}>Hello RN</Text>
        //     <Text style={styles.plainText}>Nice to meet you.</Text>
        //     <Button title={btnTitle} color="orange"></Button>
        // </View>
 
        // 이미지 컴포넌트 사용하기 [Image 컴포넌트도 사용하려면 import]
        <View style={styles.root}>
            <Text style={styles.mainText}>Hello RN</Text>
            <Text style={styles.plainText}>Nice to meet you.</Text>
            <Button title={btnTitle} color="orange"></Button>
 
            {/* 이미지 */}
            {/* 이미지의 경로명 작성시에 문자열 결합 + 를 이용하면 안됨 */}
            {/* 만약 버튼을 누를때 이미지가 자동으로 바꾸고 싶다면 */}
            {/* require()메소드 자체를 저장하는 배열을 사용함*/}
            <Image source={require('./images/ms19.png')} style={styles.img}></Image>
            
        </View>
 
        );
 
    }//render..
    
}// class..
 
// 스타일 변수들을 하나의 객체에 모아서 만들기
const styles=StyleSheet.create({
    root : {
        backgroundColor: '#AAFFCC',
        flex: 1,
        padding : 16,       
    },
    mainText: {
        color:'blue',
        fontSize: 20,
        fontWeight: 'bold',
        margin: 16,
    },
    plainText:{
        margin:8,
        color: '#333333',
    },img: {
        margin: 4,
        flex: 1,
        width:null, //이미지 가로사이즈를 화면 사이즈에 맞춤
        resizeMode: 'contain'//이미지가 양 옆이 잘릴때
    },
 
});
 
// MyApp클래스 밖에 변수를 선언하면 전역변수[물론, 이 MyApp.js안에서만]
const rootContainerStyle={
    backgroundColor: "#AAFFCC",
    flex:1,
    padding:16,// 단위는 기본 dp
 
    // 컴포넌트들을 가로 축 가운데 정렬하고 싶다면
    // 현재 flex-direction에 해당하는 세로 방향의 반대축 정렬인 align-items속성 사용
    // alignItems:'center',
};  
 
// 글씨스타일 객체
const textStyle={
    color:'#FF0000',
    fontSize:20,
    fontWeight: 'bold',
    margin:16, //마지막에 , 있어도 되고 없어도 무방
}
 
// 일반글씨 스타일
const plainTextStyle={
    margin:8,
    color: '#333333',
}
// 버튼 스타일
const btnSyle={
    margin:50,
    color:'#FF0000'
}
 
// MyApp클래스를 다른 문서에서 사용하려면 export 해줘야함 [index.js에서 처음 실행되는 Component로 등록하고자 함]
export default MyApp;

index.js

/**
 * @format
 */
 
//  자바의 import와 같은 역할
import {AppRegistry} from 'react-native'; //.js 생략 가능
import App from './App';//.js 생략 가능
import MyApp from './MyApp';
import {name as appName} from './app.json';
 
// 처음 실행되는 Component(Activity, View와 같은 역할)를 지정.
// 첫번째 파라미터 : 프로젝트 이름
// 두번째 파라미터 : 처음 실행할 컴퍼넌트를 리턴해주는 콜백함수
// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => MyApp);