[ React Native ] ES6 Script주요 기능(화살표함수, 비구조 할당 , 리터널 함수, 객체 리터널, map 함수)

리액트 네이티브로 앱 개발을 하기 전 ES6의 주요 기능들을 알아보겠습니다!!

 

- 화살표 함수

기존에는 함수를 선언하기 위해서 function 키워드를 사용했습니다. 
이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.

[기존 방식]

let a = function() {
  console.log("function");
}
a();

[최신 방식]

let a = () => {
  console.log("arrow function");
}
a();.

 

 

- 비구조 할당

 

딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.

//객체 
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

//비구조 할당 방식
let { owner, getPost } = blog;       
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

 

 

 

 

- 리터널 함수

최신 방식에서는 키보드에서 느낌표 옆에 있는 키인 백 틱 ( ` ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있습니다. 또한 백틱 ( ` ) 안에서는 여러 줄의 줄 바꿈도 자유롭게 사용 가능합니다.

const id = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. ` 

 

 

- 객체 리터널

기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.

[기존 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name: name,
  job: job
}

console.log(user);
//{name: "스파르타", job: "developer"}

최신 방식으로는 다음과 같이 간결하게 작성할 수 있습니다.

[최신 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변숫값이 대입됩니다.

 

 

- map 함수

 

값을 여러 개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때,
반복문을 사용하는 것이 아닌 map() 함수를 사용해서 다뤄보겠습니다.

 

array.map(callbackFunction(currenValue, index, array), thisArg)

 

 

let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})


numbers.map(function(value,i) {
    console.log(value,i)
})

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6