[React] React에서 자주 사용되는 필수 es6문법

1.상수와변수

const : 재할당 안됨. 내부속성값은 수정 가능.
let : 재할당 가능!
var: 쓰지마세요...
*둘다 block level scope를 가집니다.

 

2.객체를 선언하는 방법

const name = 0hyeon;
const age = 21;

const obj = {
	name,
   	age,
   	dosomething: ()=>{}
}

(생략가능)

 

3.얕은복사 (복사주의)

const obj1 = {
	value1 = 10;
}

obj2 = obj1
obj2.value1 += 1;
console.log(obj1.value1)//11
console.log(obj2.value1)//11

obj2를 바꿨는데 obj1도 바뀌어버리는 문제가 얕은복사의 문제점 ( 바라보는 주솟값을 복사했기때문)

 

해결법:

 obj3 = JSON.parse(JSON.stringify(obj1)); 

해결방법 새로운 객체를 이런식으로 만들면된다.

 

(깊은복사는 객체안에 객체를 복사해야할때 문제가 발생)

 

3.템플릿 리터럴

let name = '김영현';
console.log(`제이름은 ${name}`입니다.);

 

4.배열 / 객체 비구조화(구조분해 할당)

const person = {
	name : 0hyeon;
	age : 21;
}

const { name, age } = person;//구조분해할당

console.log(name)//0hyeon
console.log(age)//21

 

const testArr = [1,2,3,4,5];
const [one,two,three,four,five,six] = testArr;

console.log(one);//1
console.log(two);//2
console.log(three);//3
console.log(four);//4
console.log(five);//5
console.log(six);//undifined

 

 

5.전개연산자

let [name, ...rest] = ["0hyeon",21, "Soeul"];

console.log(name);//0hyeon
console.log(rest);//[21, "Soeul"]

 

6.화살표함수

function mysum1(a,b){
  return a + b
}

const mysum2 = (a,b) => a + b;
const mysum3 = (a,b) => {return a + b};
//중괄호가 열리면 return을 해야한다.

mysum1(1,2)//3
mysum2(1,2)//3
mysum3(1,2)//3