[React.js] Check ES6 .03

React Hook을 하기 앞서 ES6문법 중 필수적이라고 생각되는 것 몇개만 짚어볼까 합니다.

처음 제가 Hook을 공부할 때 ES6문법이 많이 나와서 엄청 당황했었던 기억이 있습니다!

그 중 꽤 자주 사용하는 문법을 한 번 더 확인해볼까요?

 

 ✔ const와 let

기존에 사용하던 var는 함수레벨 스코프(Fucntion-level Scope), var 키워드 생략 허용, 변수 중복 선언 허용, 변수 호이스팅과 같은 단점을 지니고 있는데 특히 Scope(유효 범위)가 넓은 것은 문제를 발생시킬 확률이 큽니다. 이러한 이유들로 const와 let 키워드를 도입하게 됬다고 합니다. 아래 링크에서 더 자세한 내용을 확인해보세요..

let, const | PoiemaWeb

2020.12.22 추가 - var의 호이스팅과 class,let,const에서는 호이스팅을 막아주는 TDZ 내용을 추가합니다.

TDZ을 모른 채 자바스크립트 변수를 사용하지 말라

✔ 화살표 함수

함수를 선언하는 방법은 함수 선언식과 함수 표현식이 있는데 여기서 함수 표현식의 기존 표현방법을 간단하게 해주는 문법입니다.

//기존 함수 표현식
const addFunc = function(i,n) {return i+n;}
                
// 화살표 함수로 만든 함수 표현식
const addFunc = (i,n) => i+n;

함수 내에 별 다른 내용 없이 바로 return한다면 위와 같이 표현 할 수 있어요. 만약 내용이 더 추가된다면, 아래와 같이 { } 괄호를 넣어 작성해야해요. 

const addFunc = (i,n) => {result = i+n; return result;}

또한 선언하는 방법에 따라 this가 가리키는 객체가 다른데요. 아래 링크를 한번 확인해봅시다.

Arrow function | PoiemaWeb

 

✔ 구조 분해 할당

자동으로 배열 또는 객체를 분해해 변수에 담아주는 문법입니다. 편리하고 유용한 기능입니다. React를 사용하면서 자주 만나게 될겁니다. 먼저 배열을 구조분해할당하는 예를 보겠습니다.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
//10

console.log(b);
//20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
//[30,40,50]

 

a엔 10이 담기고, b에는 20이 담겼습니다. ...rest는 Spread 연산자로 아래에 따로 설명하겠습니다. 

 

객체를 구조분해할당하는 예를 보겠습니다.

let Menu = {
  coke: 1400,
  cider: 1000,
  coffee: 300
};

let {coke, cider, coffee} = Menu;

console.log(coke);  // 1400
console.log(cider);  // 1000
console.log(coffee); // 300

선언한 변수명과 Menu 객체 안의 Key값이 동일하다면 Value 값이 매칭되서 변수에 할당됩니다. 순서는 그리 중요하지 않습니다. 변수에 = 을 사용하여 할당 되지 않았더라면 기본값이 담기게 할 수 있습니다. 또는 원하는 값만 뽑을 수도 있습니다. 이외에도 중첩구조분해 같은 것도 가능합니다.

let {coke=100,cider} = Menu;

구조 분해 할당

 

✔ Spread 연산자 (...) 와 Reat 문법

구조분해할당에서 보았던 예의 일부를 가져와 보겠습니다.

let [a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
//[30,40,50]

순서대로 a = 10이 b = 20이 할당되고 rest에 나머지 [30 , 40 , 50]이 할당됩니다.

이외에도 이렇게 사용할 수도 있습니다.

const number = [1,2,3,4,5,7]
const new = [6,8,9,...number]

console.log(new);
// [6,5,9,1,2,3,4,5,7]

number 배열의 내용이 new 배열에 합쳐져서 나타납니다. 중복되는 경우 가장 오른쪽에 있는 값이 반영됩니다.

07. spread 와 rest 문법 · GitBook

 

✔ Acync - Await

해당 문법을 통해 기존의  Promise 문법을 더욱 편한하게 사용할 수 있습니다.

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000)
  });

  let result = await promise; // Promise가 이행될 때까지 기다림 (*)

  alert(result); // "완료!"
}

f();

함수 앞에 async를 붙여주면 해당 함수가 비동기 함수라고 알려줍니다. 함수 안에 비동기적 요소가 있으면 await을 붙여 해당 값이 들어올 때까지 기다려줍니다.

async와 await

 

✔ 모듈

라이브러리나 필요한 부분을 다른 파일에서 불러와서 사용하는 경우가 있을 때 과거엔 require를 사용했다면 ES6에서는 import를 사용합니다. 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 더 좋습니다.

//CommonJS에서 라이브러리를 불러오는 방식, Node.js나 이전에 많이 사용함.
const React = require("react")

//ES6에서 라이브러리를 불러오는 방식
import React from "react"

모듈 소개

 

위에서 링크한 사이트들은 JavaScript를 공부함에 있어 참고하기 좋은 사이트입니다.

해당 문법외에도 React를 공부하면서 또는 JavaScript를 공부하면서 필요로 하는 문법을 찾아보시길 바랍니다.