[ React Native ] 리액트 네이티브 10분만에 개발 - 구름 IDE 환경에서 리액트 네이티브 개발

React Native X Goorm IDE

[ 개요 ]

오늘 " 구름 IDE 환경에서 리액트 네이티브 개발하기"라는 주제로 이야기 해보고자 합니다. 

구름 IDE 가입 및 사용은 다음 포스팅을 참조하여 주시기 바랍니다. 

https://richwind.co.kr/100

웹 IDE(구름IDE)로 개발(Coding)환경을 구축해 보자.

[ 시작하기 전에 ... ] 

시작에 앞서 미리 말씀 드릴 내용은, 우리는 구름 IDE를 사용해서 React-Native 환경을 클릭 몇번만으로 환경 세팅 할 것입니다. 

그리고, 코딩할 내용은 github에서 가져 올 예정입니다. 

가져와서 살펴볼 코드 예제는 아래 코드 입니다. 

구름IDE에서 React-Native 예제로 사용할 Github Code Example

https://github.com/iamshadmirza/TaskMaker

 

---

[구름 IDE 시작]

자. 이제 본격적으로 시작 해 보도록 하시지요. 

구름 IDE를 가입 후 환경 설정을 하면, 다음과 같은 결과 화면이 예상됩니다. 

구름 IDE의 실행 화면

---

https://play.google.com/store/apps/details?id=com.my2048

2048 카툰 - Google Play 앱

기본 코드 - Hello World

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

export default class App extends React.Component {
  render() {
      return (
        <View>
            <Text>Welcome to Tutorialspoint</Text>
        </View>
      );
  }

 

다양한 테스트/훈련 케이스를 위해서,  기본 App.js는 아래와 같이 Component를 감싸는 컨테이너 역할만 하기로 한다. 

그리고, 매 예제마다 다른 js파일을 만들어서 import 후 Component를 사용하여 진행 예정이다.

 

---

App.js 

   -   Test01.js에서 Text01 Component를 읽어와 실행하는 역할 하도록 구성

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

import Test01 from './Test01.js'

export default function App() {

  return (
      <Test01 />
  );
}

 

 

Test01.js

• 실제 코드는 import 된 js 파일 ( ex. Test01.js)에 구현 되어 있다. 

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

export default function Test01() {
state = {
myState : '[STATE VALUE] TEST State !!!!!!!!!!! 한글 스테이트....'
}

  return (

          <View style = {styles.container}>
  <View style ={styles.container2}>
  <View style={styles.redbox} />
  <View style={styles.bluebox}  />
  <View style={styles.blackbox}  />
  </View>
  <Text> TEST !! </Text>
  <Text> {this.state.myState} </Text>

        <WebView
        source = {{ uri:
        'https://www.google.com/?gws_rd=cr,ssl&ei=SICcV9_EFqqk6ASA3ZaABA#q=tutorialspoint' }}
        />
      </View>

  );
}

const styles = StyleSheet.create({
  container: {
  height : 300,
    flex: 1,
  flexDirection: 'column',
    backgroundColor: '#fff',
    justifyContent: 'center',
  },
  container2: {
  height : 200,
  flexDirection: 'row',
  backgroundColor: 'gray',
  alignItems: 'center',
  justifyContent : 'center'
  },
  redbox: {
      width: 100,
      height: 100,
      backgroundColor: 'red'
  },
  bluebox: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
  },
  blackbox: {
      width: 100,
      height: 100,
      backgroundColor: 'black'
  },

});

[ 실행 화면 예 - FlexBox, Text(State), WebView를 배치한 예제 ] 

 

---

State

App.js

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

//import Test01 from './Test01.js'
import Ex_state from './Ex_state.js'

export default function App() {

  return (
      //<Test01 />
  <Ex_state />
  );
}

 

 

Ex_state.js

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

export default class Ex_state extends Component {
state = {
myState : ' ## State Test Example ## State를 테스트 합니다. App.js 에서 import 해당 class/Component를 import 합니다.'
}
    render() {
return(
    <View>
<Text> {this.state.myState} </Text>
</View>
);
}

}

 

 

실제 Text 가 출력되는 부분이 윗부분에 치우쳐져 있어서, TEXT가 보이질 않는다.

따라서, 기본 StyleSheet 를 넣어 주자.

---

기본 Style 적용

const styles = StyleSheet.create({
container : { height: 800, justifyContent : 'center' }
});  

※ 참조 : 테스트의 편의를 위해서, 코드의 효과를 확실하게 체감하기 위해서는 아래와 같은 StyleSheet를 적용해 두는 것도 좋다. 

const styles = StyleSheet.create({
container : { height: 400, justifyContent : 'center', borderWidth : 0.9, borderRadius: 5, margin : 10 }

});

 

View 에 Style을 지정해 주어야 한다. 

<View style = {styles.container} > </View> 를 반영한다.  

결과를 모두 반영하면, Ex_state.js는 아래와 같다. 

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

export default class Ex_state extends Component {
state = {
myState : ' ## State Test Example ## State를 테스트 합니다. App.js 에서 import 해당 class/Component를 import 합니다.'
}
    render() {
return(
    <View style = {styles.container} >
<Text > {this.state.myState} </Text>
</View>
);
}
}

const styles = StyleSheet.create({
container : { height: 800, justifyContent : 'center' }

});

 

App.js

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

//import Test01 from './Test01.js'
import Ex_state from './Ex_state.js'

export default function App() {

  return (
      //<Test01 />
  <Ex_state />
  );
}

---

Props

Properties를 전달하는 props 기능 테스트를 위해서, 아래와 같은 구조를 가지는 MyProps.js와 MyProps Class를 생성하였다.  

state , updateState , render()함수 아래 return () 구현의 구조를 가지고 있다. 

 

MyPorps.js

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

export default class MyProps extends Component {
state = {}
    
    updateState = () => {}

render() {
return(<View></View>);
}

}

실제 표현될 내용은 별도의 Component로 구현을 해 본다. 별도의 Component로 구현을 하는 이유는, props의 변수 전달을 체감하기 위한 것이다. 

따라서, 아래와 같은 구조로 Simple Component를 생성한다. 해당 Component는 동일 js 파일에 생성하여도 되지만, 좀 더 효과를 느껴 볼 수 있도록 별도 파일로 분리하였다. 

 

SimplePresentComponent.js

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

const SimplePresentComponent = (props) => {}

export default SimplePresentComponent

 

SimplePresentComponent 는 props를 전달 받는 함수이며, binding 처리 ( => 함수)되어 있다.  

위 프레임을 기본으로, SimplePresentComponent에 가장 단순한 출력할 내용을 구현해 보자. 

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

const SimplePresentComponent = (props) => {
return(
<View >
<Text> {props.myState} </Text>
</View>
);
}

export default SimplePresentComponent

출력할 내용은 props 로 전달받은 myState 변수 이다. (myState는 여기서는 변수이다. 부모 Component의 상태값을 변수에 담아 전달한 것이다. ) 

그러나, update를 아직 반영하지 않았다. Text를 클릭 했을 때, update 되도록 적용하면, 아래와 같이 <Text> Tag를 변경하여 준다. 

<Text onPress = {props.updateState} > {props.myState} </Text>

변경된 결과 SimplePresentComponent.js 는 아래와 같다. 

SimplePresentComponent.js

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

const SimplePresentComponent = (props) => {
return(
  <View  >
    <Text onPress = {props.updateState} > {props.myState} </Text>
  </View>
);
}

export default SimplePresentComponent

부모 Component : MyProps.js

자. 이제 부모 Component에 해당하는 MyProps.js 파일을 구현하도록 한다. 

MyProps.js 에서는 기존 프레임으로 구성해둔, state, updateState, render 내부의 return() 을 구현한다. 

 

SimplePresentComponent.js 를 import 해준다.

import SimplePresentComponent from './SimplePresentComponent.js'

state 값을 지정한다. 

state = { myState : ' [myState 변수값] : 상태값(State)를 props로 전달합니다. ' }

update 할 내용을 작성한다. 

updateState = () => { 
this.setState(   {myState: ' [UPDATED] 상태값이 업데이트 되었습니다. !!! ' }    )

보열줄 내용 ( render 함수 내 return () )을 작성한다. 이 때 앞에서 작성한 SimplePresentComponent 에 전달하는 속성(props)를 적절히 입력하여야 한다. 아래의 경우는, state에 입력한 myState와 update 함수인 updateState를 전달해 주는 경우 이다.  

return(
<View style={styles.container} >
<SimplePresentComponent myState={this.state.myState} updateState={this.updateState} />
</View>
);

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

import SimplePresentComponent from './SimplePresentComponent.js'

export default class MyProps extends Component {
state = { myState : ' [myState 변수값] : 상태값(State)를 props로 전달합니다. ' }
    
    updateState = () => { 
this.setState(   {myState: ' [UPDATED] 상태값이 업데이트 되었습니다. !!! ' }    )
}

render() {
return(
<View style={styles.container} >
<SimplePresentComponent myState={this.state.myState} updateState={this.updateState} />
</View>
);
}

}


const styles = StyleSheet.create({
container : { height: 300, borderWidth:0.9, backgroundColor:'gray',  justifyContent: 'center' },
});

 

추가적으로 update 시점에 StyleSheet도 전달해 줄 수 있다. 이렇게 하면, <Text>를 클릭했을 때, state의 string 값 외에도 Style을 변경해 줄 수 있다. 이 때, State 변경에 따라서 Style을 다르게 가져가이 위해서는 myStyle props를 추가 해 주었음을 참고하기 바란다.  Style 변경을 포함한 코드는 아래와 같다. 

 

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native' ;
import SimplePresentComponent from './SimplePresentComponent.js'

export default class MyProps extends Component {
state = { myState : ' [myState 변수값] : 상태값(State)를 props로 전달합니다. ' ,
myStyle : styles.text
}
    
    updateState = () => { 
this.setState(   {myState: ' [UPDATED] 상태값이 업데이트 되었습니다. !!! ', myStyle : styles.text_onPress }    );

}

render() {
return(
<View style={styles.container} >
<SimplePresentComponent myState={this.state.myState} updateState={this.updateState} myStyle={this.state.myStyle} />
</View>
);
}

}

const styles = StyleSheet.create({
container : { height: 300, borderWidth:0.9, backgroundColor:'gray',  justifyContent: 'center' },


text : { height: 300, borderWidth:0.9, color:'black', justifyContent: 'center', alignItems: 'center' },
text_onPress : { height: 300, borderWidth:0.9, color:'red', backgroundColor:'yellow', justifyContent: 'center', alignItems: 'center'  },
});

---

Styling

 

Style Sheet는 위에서 이미 사용해 보았기 때문에 크게 별다른 내용은 없다. 

기본적인 내용으로 Style Sheet를 만들고 넘어가도록 한다. 

Style Sheet 적용을 위해서, StyleSheet 모듈의 create 함수를 사용하고, 함수의 인자로 Dictionary type으로 CSS를 입력한다. 

 

적용 대상이 되는 Tag / Component에서는 “style = {styles.container} “ 형태로 style 속성을 지정한다.

아래는, myStyle 이라는 state 변수가 style로 지정되어 있을 때, Text Component에  Style을 지정하는 코드이다.

<Text  style = {this.state.myStyle} > 스타일 테스트 </Text>

 ※ 일반 CSS와 속성명의 표현법이 약간 다르므로 이점 유의 한다.  

 

아래는 기본적인 Style sheet의 예제이다.

const styles = StyleSheet.create ({
  myStyle: {
      marginTop: 20,
      textAlign: 'center',
      color: 'blue',
      fontWeight: 'bold',
      fontSize: 20
  }
})

---

React-Native의 구조 (재점검)

 

이제 React-Native 형태에 익숙해 졌을 것이다. 

이 쯤에서 React Native의 기본 구문에 점검해 보자. 

 

1. 기본적을 react의 기본 모듈, 그리고 react와는 다르게 사용하는 react-native 만의 모듈을 import 한다.  

2. 출력 대상이 되는 Component 작성을 한다. 입력받는 props 와 내부에서 state를 선언해 주어야 하며, 반환되는 결과는 JSX 형태를 취하면 된다. 따라서, const를 사용할 경우 return 함수 내부에 JSX를 작성한다. 

다만, const 변수 선언 외에 Component Class를 상속받아 Class로 작성하는 방법도 가능하다. 이 때 기본적으로 미리 선언되어 있는 생성자 (constructor)와 반환함수 render() 를 작성해 주어야 한다. 

 

1. Component 중 기본/대표 Component 를 지정해 주어야 한다. 이는 “export default <class명>”으로 처리되고 있다. 다만, 이것은 class 선언과 함께 표기가 가능한다. 따라서, “ export default class <class명> “ 형태로 사용하기도 한다.

2. 다음으로, Optional 하지만 꼭 필수적으로 적용되는 StyleSheet를 지정한다.  

아래는, 상기에서 설명한 내용을 반영한 기본 구조의 코드이다. 

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const MyFlexbox = (props) => {
state = {}
updateState = () => {}
return(<View></View>); 
}
export default MyFlexbox;

/* export default const  MyFlexbox = (props) => {} */

const styles = StyleSheet.create({})

 

Component의 구현을 Class로 하게 되면 아래와 같은 구조를 고려할 수 있다.  

---

Flexbox

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const MyFlexbox = (props) => {
class MyFlexbox extends Component {
  constructor(props) {
      super(props);
      this.state = { myState : ' this is an initial state. ', };
  }
    updateState = () => {};
render() { 
return(
<View><Text>1234</Text></View>
); 
}
}

export default MyFlexBox;

const styles = StyleSheet.create({})

---

 서로 다른 크기의 스크린/Layout을 제공하기 위하여 React-native는 Flexbox라는 기능을 제공한다. 

단순하게 생각해서, 여러 Component 들의 배열을 제어하는 Layout 기능이라고 생각하면 된다. 

 

Style 속성값으로 조절하게 되며, 주요 속성항목으로  flexDirection, justifyContent, alignItems 들을 조정할 수 있다. 

Property	values	설명
flexDirection	'column', 'row'	세로 정렬 (column) 할것인지, 가로정렬( row ) 할것인지를 지정한다.
justifyContent	'center', 'flex-start', 'flex-end', 'space-around', 'space-between'	Container 내부에서 여러 Element 들의 분포 형태(Distribution)를 지정한다.
alignItems	'center', 'flex-start', 'flex-end', 'stretched'	Container 내부에서 정렬을 위한 두번째 축 (2nd Axis)를 사용한다.

 

---

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

const MyFlexbox = (props) => {
state = {}
updateState = () => {}
return(
<View style={styles.container}>
<View style={styles.redbox} />
<View style={styles.bluebox} />
<View style={styles.blackbox} />
</View>
); 
}

export default MyFlexbox;


const styles = StyleSheet.create({
container : {flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'grey', height: 600},
redbox : {width: 100, height: 100, backgroundColor : 'red'},
bluebox : {width: 100, height: 100, backgroundColor : 'blue'},
blackbox : {width: 100, height: 100, backgroundColor : 'black'},
});

우선 위의 코드를 실행하면 아래와 같은 결과물을 볼 수 있다.  

justifyContent 라는 속성이 좀 생소한데, 좀 더 쉽게 설명하면, 여러개의 Element 들이 Container내에서 어떻게 공간을 분배하여 위치를 잡을 것인가?에 대한 지정 속성이다. 

 

상기 실행 결과는 1개의 Container 내부에 3개의 view box를 배치한 결과이다. justifyContent에 대한 속성을 (a) center , (b) space-between 으로 지정할 때 각각 다른 결과를 확인할 수 있다.