앱개발에 자주 쓰이는 Javascript

함축적인 자바스크립트

리액트 네이티브는 항상 최신 버전의 자바스크립트 문법(ES6)을 사용한다!

그렇기 때문에 공식문서를 볼 때 당황하지 않고 적용하기 위해서 그리고 기존 자바스크립트보다 더 함축적이고 간결한 문법을 사용하기 위해 배워보자!

 

함수를 더 짧게! - 화살표 함수

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

[기존 방식]

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

[최신 방식]

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

딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당

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

 딕셔너리는 키와 벨류의 값의 쌍일 수도 있고 함수를 품은 이것도(getPost()) 키의 벨류로 함수를 가질 수도 있다.

//객체 
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 -반복문의 또 다른 방식

리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했다.

let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}

 

이를 위해 리스트의 길이 값을 알아야 했다. 
map은 리스트의 길이값을 몰라도 되며, for와는 반대로 리스트 안에서 몇 번째에 있는 값인지 순서를 알려준다.

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