React 에서 자주 사용되는 ES6 문법

2023.02.03

상수와 변수

상수 : const (constant : 변함없는 수)

• 재할당 안돼요. 내부 속성값은 수정 가능.

변수 : let

• 재할당 가능해요.

둘 다 block level scope(중괄호 안헤서만 선언한 변수가 유용해지는것)를 가진답니다.

if (true) {
  var a = 1; 		// 정상적으로 출력됩니다.
  // const a = 1;   // 에러 : Assignment to constant variable
}

console.log(a);

(이전에는 변수로 "var" 를 썼지만, block level scope 가 없기때문에 이제는 쓰지 않아요!)

---

Object 선언, 단축 속성, 객체 복사

object는 "key-value" 페어로 붙어다닙니다!

ES6 에서 추가된 선언방법

const name = '르탄';
const age = 21;

/** 단축속성 : key - value가 일치하면 생략해요. */

// 변경 전 객체선언 방법
const person = {
	name: name,
	age: age,
	company: 'sparta coding club',
	doSomething: function(){},  // 함수도 가능하다.
}

// 변경 후 생략한 객체선언 방법
const person = {
	name,
	age,
	company: 'sparta coding club',
	doSomething: function(){},
}

복사 주의! (얕은 복사)

const obj1 = { value1: 10 };
const obj2 = obj1; // 얕은 복사 (같은 주소값을 보기때문에 둘다 바뀜! 사용주의)
const obj3 = JSON.parse(JSON.stringify(obj1)) // 새로운 주소값을 만든다!

obj1.value1 += 1;

console.log(`obj1:`, obj1);  // obj1 { value1: 11 }
console.log(`obj2:`, obj2);  // obj2 { value1: 11 }
console.log(`obj3:`, obj3);  // obj3 { value1: 10 }

---

Template Literals(백틱)

const expression = "제어하는 값"

// 일반 텍스트
`string text` // 백틱 이라고 부른다

// 멀티라인
`string text line 1
 string text line 2`

// 플레이스 홀더를 이용한 표현식 (백틱안에는 JavaScript 변수를 활용가능)
`string text ${expression} string text`

---

배열/객체 비구조화 (Array/Object Destructuring)

구조분해 할당이라고도 한다!

객체의 비구조화(구조분해 할당)

// person 객체 안에 있는 값들이 구조가 해제되어 각각 변수에 할당됩니다.

const person = {
	name: '르탄',
	age: '21'
}

const { name, age } = person;
console.log(`${name}님, ${age}살이시네요!`);
// 르탄님, 21살이시네요!


// 함수의 입력값 또한 각각 구조가 해제되어 각각 변수에 할당됩니다.

function hello({name, age}) {
	console.log(`${name}님, ${age}살이시네요!`);
}

hello(person);
// 르탄님, 21살이시네요!

배열의 비구조화(구조분해 할당)

// 객체에서의 케이스와 마찬가지로 배열도 구조분해 할당이 이루어진다!

const testArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = testArr;

console.log(val1); // 1 이 출력된다
console.log(val3); // 3 이 출력된다


// 추가 예제

let [name] = ["Tom", 10, "Seoul"];
// Tom

let [, age] = ["Tom", 10, "Seoul"];
// 10

let [name, age, region] = ["Tom", 10, "Seoul"];
// Tom 10 Seoul

let [name, age, region, height] = ["Tom", 10, "Seoul"];
// Tom 10 Seoul undefined

let [name, age, region, height = 150] = ["Tom", 10, "Seoul"];
// Tom 10 Seoul 150

---

전개 연산자 (Spread Operator)

전개연산자(…)를 이용해서 다음과 같이 활용할 수 있다!

CASE 1

let [name, ...rest] = ["Tom", 10, "Seoul"];
// Tom
// [ 10, 'Seoul' ]

CASE 2

let names = ["Steve", "John"];
let students = ["Tom", ...names, ...names];
// [ "Tom" , "Steve", "John", "Steve", "John" ] 

CASE 3

let tom = {
  name: "Tom",
  age: 10,
  region: "Seoul",
};
// { name: 'Tom', age: 10, region: 'Seoul' }

let steve = {
  ...tom,
  name: "Steve",
};
// { name: 'Steve', age: 10, region: 'Seoul' }

---

Arrow Functions

const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y};

const mysum3 = (x, y) => ({x: x, y: y}); 
const mysum4 = (x, y) => {
  return {x: x, y: y};
}
// 두줄이 될때는 생략한 'return' 을 사용해주어야 한다

const mysum5 = function(x, y) {
  return {x: x, y: y};
};
function mysum6(x, y) {
  return {x: x, y: y};
}