[React] React를 시작하기 전 알아두면 좋을 ES6 & ES2020 문법

React – A JavaScript library for building user interfaces

 

 

 

!!  React를 배우기 전 알아두면 좋은 ES6 & ES2020 의 대표적인 8가지 문법

 

 

 1)  const, let 

 

-  const  :  한번 선언하면 값을 바꿀 수 없는 상수

-  let  :   선언과 변경이 자유로운 변수

 

const로 선언된 변수는 같은 스코프(중괄호) 내에서 중복된 이름을 가질 수 없다.

 

var는 let과 비슷하게 작동하는 듯 보이지만

 

함수 myFunc() 내에 선언된 변수 var a 의 경우 함수 밖에서 이 변수를 참조하여 값을 가져올 수 있다.

함수 myFunc() 내에 선언된 변수 let b 의 경우 함수 밖에서는 이 변수를 참조 할 수 없다.

 

→  var를 사용하여 변수를 선언하면 스코프가 명확하게 구별되지않고 변수를 참조할 수 있게 되기 때문에 개발 시 혼란을 줄 수 있다.

→  var보다는 const, let을 이용한 변수 선언을 권장

 

 

 

 

 

 2)  Array Method  ( forEach(), map(), filter(), ... ) 

 

-  Array.forEach()

:  배열의 요소를 이용해 순차적으로 함수를 실행하는 메서드(method)

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

arr.forEach( (현재요소, 현재요소의 인덱스, forEach를 호출한 arr) => {
   ...
}, callback을 실행할 때 this로 사용할 값);

const b = [0, 1, 2, 3, 4, 5];

b.forEach((item) => {
    console.log(item);
});

// 0, 1, 2, 3, 4, 5

Array.prototype.forEach() - JavaScript | MDN

 

 

-  Array.map()

:  배열의 요소를 이용해 순차적으로 함수를 실행하여 새로운 배열을 반환하는 메서드

( forEach()와 다른 점은 map()은 새로운 배열을 반환, forEach()는 반환값 없음 )

arr.map(callback(currentValue[, index[, array]])[, thisArg])

arr.map( (현재요소, 현재요소의 인덱스, map을 호출한 arr) => {
    ...
    return ...
}, callback을 실행할 때 this로 사용되는 값);

const d = [0, 1, 2, 3, 4, 5];

const newD = d.map(function(item) {
    return item * 2;
});

// 0, 2, 4, 6, 8, 10

Array.prototype.map() - JavaScript | MDN

 

 

-  Array.filter()

:  배열의 요소를 이용해 순차적으로 함수를 실행하여 조건을 통과하는 요소를 모아 새로운 배열로 반환하는 메서드

arr.filter(callback(element[, index[, array]])[, thisArg])

arr.filter( (현재요소, 현재요소의 인덱스, filter를 호출한 arr) => {
    ...
    return ...    //  true를 반환하면 요소를 유지하고, false를 반환하면 요소를 버림
}, callback을 실행할 때 this로 사용하는 값);

const d = [0, 1, 2, 3, 4, 5];

const newD = d.filter(function(item) {
    return item > 3;
});

// 4, 5

Array.prototype.filter() - JavaScript | MDN

 

 

 

 

 

 3)  Arrow Function  ( () => {} ) 

 

Arrow Function(화살표 함수)은 function 표현보다 구문이 짧은 함수 표현이다.

→  function이라는 키워드를 생략하고 매개변수 를 받은 뒤 => 를 써주는 형태

 

중괄호{} 를 열어 로직을 작성할 수 있으며

return 값만 존재하는 짧은 함수의 경우 중괄호와 return을 생략하고 바로 return할 값을 입력할 수도 있다.

const a = (x, y) => console.log(x,y);

const b = (x, y) => {
    ...
    return ...
 }

 

 

 

 

4)  Destructuring assignment  ( const {a,b,c} = obj )

 

Destructuring Assignment (구조 분해 할당)은 객체나 배열을 해체하여 개별 변수에 담을 수 있게 하는 표현식이다.

 

Object의 경우 

기존에는 객체에 담긴 값을 각각 새로운 변수로 선언하기 위해 아래와 같이 작성하였지만 

var a = { x: 1, y: 2, c: 3 };
var x = a.x;
var y = a.y;
var z = a.x;

Destructuring Assignment 표현을 이용하여 아래와 같이 더 간편하게 코드를 작성할 수 있다.

const b = { i: 1, j: 2, k: 3 };
const { i, j, k } = b;

 

 

Array의 경우

기존에는 배열에 담긴 값을 각각 a,  b에 담기 위해 아래와 같이 표현하였지만 

var c = [1, 2, 3];
var c0 = c[0];
var c1 = c[1];
var c2 = c[2];

Destructuring Assignment 표현을 이용하여 아래와 같이 더 간편하게 코드를 작성할 수 있다.

const d = [1, 2, 3];
const [d0, d1, d2] = d;

 

 

 

 

 

5)  Shorthand property names  ( const obj = {a, b, c} )

 

Shorthand property names (단축 속성명)을 이용해 새로운 객체 선언을 간편하게 할 수 있다.

새로 선언하는 object에 key값과 동일한 변수명을 가진 변수를 할당할 경우 value 값을 생략해서 적을 수 있다.

const username = "레이서";
const age = 20;
const school = "엘리스";

const person = { username, age, school };

// 이전 문법 :  const person = { username: username, age: age, school: school };

 

 

 

 

 

6)  Spread Syntax  ( const a = {...b, ...c} )

 

Spread Syntax (전개 구문)은 배열이나 객체 를 전개할 때 사용한다.

기본적으로 배열이나 객체에 ... 을 붙여 사용하며 함수 호출 및 선언, 배열 선언, 객체 선언 시 다양하게 활용 가능하다.

const numbers = [1, 2, 3];

function getSum(...n) {
    let sum = 0;
    
    n.forEach( (item) => {
        sum += item;
    });
    
    return sum;
}

getSum(...numbers);

const newNumbers = [0, ...numbers, 4, 5, 6];
// 0, 1, 2, 3, 4, 5, 6

 

 

참고로 두 객체를 합성할 때 겹치는 key가 있을 경우 나중에 오는 값이 들어간다.

const user = { name: "레이서",  age: 23, school: "엘리스" };

const newUser = { ...user, grade: 3, age: 24 };
// { name: "레이서",  age: 24, school: "엘리스",  grade: 3}

 

 

 

 

 

7)  Template literals  ( const a = `hello ${name}!` )

 

Template literals (템플릿 리터럴)은 표현식을 허용하는 문자열 리터럴이다.

기본적으로 ` `(back quote)로 감싸 문자열을 표현한다.

문자열 내에 표현식을 사용하기 위해서는 ${ }(달러와 중괄호)로 표기한다.

// 이전 문법
const text1 = "Hello" + name;

// Template literals
const text2 = `Hello ${name}`;

 

 

 

 

 

8)  Optional chaining  ( const a = obj?.b?.c )

 

Optional chaining 연산자는 객체나 변수에 연결된 다른 속성 참조할 때 유효한 속성인지 검사하지 않고 값을 읽을 수 있도록 한다.

만약 유효한 속성이 아닐 경우 에러를 발생시키 지 않고 `undefined`를 반환한다.

배열의 경우 `array?.[index]` 와 같이 사용할 수 있다.

// 이전 문법
var x;
if(a && a.b && a.b.c) {
    x = a.b.c;
}

// Optional chaining
const y = a?.b?,c;

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.