21.01.18

cordova -> JS,HTML,CSS => android,ios..(속도가 느리다)
react Native -> JS,ReactJS => android,ios..(cordova보다 빠름)

[React]

- React는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
- 원래 html에서는 하나만 움직일려고 해도 다른것들도 다시 그려야한다.
- 리액트에서는 컴포넌트로 이루어져 있어서 움직이는 것만 바꾸게 된다.
- React의 기술로 mobile을 제어하는 기술이 React Native이다.

[ES-6 문법]

- React는 ECMA Script6 문법을 사용한다.
- 기존 java script문법과 크게 다르진 않지만 몇가지 차이점이 있다.

1. 변수 선언시 const, let, var의 차이

/*const : 상수(선언하면 바꿀수가 없다.)
const con = 10;
con = 20; //에러 발생
*/
//객체나 배열안의 값은 변경이 가능
const conObj = {name:'kim',score:100};
console.log(conObj.score);
conObj.score = 200;
console.log(conObj.score);

- const : 상수로 선언하면 바꿀 수 가 없다. 단 객체나 배열안의 값은 변경이 가능하다.

function foo(){
	var a = 10;
    if(true){
	let a =20;
        console.log('let a =',a)
    }
    console.log('var a =',a)
}
foo();

- let : 일반 변수(전역변수로 쓰고 지역변수로도 사용할 수 있음)
- var : 함수단위 변수(지역변수, 함수안에서만 쓰이는 변수)

2. 익명함수의 화살표 함수(=>)처리, template 사용법

let btn = document.getElementById('btn');
//기존사용방식
btn.addEventListener('click',function(){
	const msg = document.getElementById('msg');
	let name = "criss"
	msg.innerHTML = "hello" + name;
});
//화살표 함수(익명함수)
btn.addEventListener('click',(e)=>{
	console.log(e);
	const msg = document.getElementById('msg');
	let name = 'criss';
	msg.innerHTML = `hello ${name}`;
    	//template을 활용하려면 쿼터대신 백틱
});
//화살표 함수(일반 함수)
let minus = (a,b)=>{
	console.log(a-b);
}
minus(10,5);
//반환문만 존재할 경우..
/*1. let plus = (a,b)=>{
	return a+b;
}
console.log(plus(10,5));*/
//2.
let plus = (a,b)=>a+b;
console.log(plus(10,5));

3.map()의 사용법

const datas = [
	{id:'G.D.Hong',count:0, color:'red'},
	{id:'K.S.Yoo',count:0, color:'green'},
	{id:'Y.G.Kim',count:0, color:'blue'}
];
//3가지 방법으로 추출 가능하다.
//1.for문 활용
for(var i =0; i<datas.length; i++){
	console.log(datas[i]);
}
//2.forEach()
datas.forEach((data,idx)=>{
	console.log(idx,data);
});
//3.map() : 배열에서만 사용이 가능
datas.map((value,key,mapObject)=>{
	console.log(key,value,mapObject);
    	//해당키와 값 외에 주체가 되는 내용도 함께 가져온다.
});

[Component 구조]

- React에서 하나의 function은 Component를 의미한다.
- React는 Component단위로 UI나 기능이 구현된다.
- Component 선언 방법은 크게 class선언과 function 선언이 있다.
- 앱을 키면 App.js를 제일 먼저 찾고 App.js안에서 default가 박혀있는애를 찾는다.

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

- import : 외부 컴포넌트(class)를 불러오기 위해 사용된다.

export default function App() {//기본 페이지를 구성하는 컴포넌트
  return (
    <View style={styles.container}>
      <Text>새로운 네이티브 앱</Text>      
    </View>
  );
}

- 가장 기본적인 컴포넌트 선언방법

class App extends Component{
  render(){
    //이 영역안에 변수 선언
    return(
      <View style={styles.container}>
        <Text>새로운 네이티브 앱 - 클래스 형태</Text>
      </View>
    );
  }
}
export default App;

- 클래스 형태 : 한때 이 방식을 사용할것을 권고했었다.
- 그래서 현재 리액트 소스에는 클래스 형태 선언 방법이 많은 편이다.

/*
const App = ()=>{
  return(
    <View style={styles.container}>
      <Text>새로운 네이티브 앱 - 화살표 함수 형태</Text>
    </View>
  );
}*/
const App = ()=>(  
  <View style={styles.container}>
    <Text>새로운 네이티브 앱 - 화살표 함수 형태2</Text> 
  </View>  
)
export default App;

- 화살표 함수 형태 : 최근 사용을 권장하는 형태
- =>{} 를 사용 하면 render() 가 생략 된다.
- =>() 를 사용 하면 return() 이 생략 된다.