React 에서 자주 쓰는 JavaScript ES6문법 정리 23.11.01

 

 

오늘은 본격 적으로 리액트를 배우면서 자주쓰는 자바스크립트 ES6문법을 정리해 보았다 .

react를 배움에있어서 없어서는 안될 필수 JS 문법들이다 .

---

목차 

1. const(상수)와 let(변수)  

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

3. Template Literals ` ` (백틱)

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

5. 전개 연산자 (Spread Operator)...

6.  화살표 함수 => ( Arrow Functions ) 

 

---

1. const(상수)와 let(변수)  

const는  constant의 약자

상수 : const : 재할당 안됨. 내부 속성값은 수정 가능  ( 말 그대로 한번 선언하면 변함이 없다 )

 

변수 : let : 재할당 가능.

if (true) {
  const a = 1;
  let b = 3;
}
console.log(a+b);
---------------------------------------------
4

---

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

중요 포인트  object는 key-value pair 

const person = {
	KEY : VALUE
	name: '폼폼코',
	age: 21,
	company: 'Naver',
	doSomething: () => {}, function  
}

                   

 key-value(밸류 자리에는 어떠한것들도 올 수 있음 EX) 함수

 

const name = '폼폼코';
const age = 21;

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

// 변경 전
const person = {
	name: name,
	age: age,
	company: 'Naver',
	doSomething: function(){},
}
-------------------------------------------------
// 변경 후
const person = {
	name,
	age,
	company: 'Naver',
	doSomething: () => {},
}

 

복사 주의! {얕은 복사}

const obj1 = { value1: 10 };
const obj2 = obj1; // 얕은 복사

console.log(`obj1:`, obj1);  
console.log(`obj2:`, obj2);   

-----------------------------------------------------------------------
여기까진  value1: 10 값이 잘나옴 

하지만 여기서 복사된obj2 를 바꾼다면 obj1도 바뀜 obj2.value1 += 1;
둘다 11값이 나온다

 

여기서 이러한 결과가 나오는 이유는 obj2=obj1을 복사한 게 아니라(정확히 말하면 주소값을 저장한 것이다 

한마디로 특정 문자가 아니라 메모리 특정공간을 같이 바라보기에 같은 공간 자체를 수정하니 11 값이 오게 된다 

이러한 현상을 "얕은 복사"라고 칭한다  이러한 현상을 방지하기 위해서

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

value1: 10 값이 잘나옴

 JSON.parse(JSON.stringify를 이용하여 아예 새로운 객체 (새로운 주소값 할당)을하면 값이 바뀌지 않고 출력이 된다

이런 식으로 값이 변하지 않도록 지켜줘야 한다 이외에도 많은 방법이 있다,

 

---

3.  Template Literals   `  `  (백틱)

// 멀티라인  ``(백틱을 이용하면 오류없이 멀티라인을 이용가능)
`string text line 1
 string text line 2`

// 플레이스 홀더를 이용한 표현식
console.log(`string text ${expression} string text`);

플레이스 홀더  : ${변수}를 이용하여 문자사이에 변수를 집어넣을 수도 있다

 

---

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

객체의 비구조화(구조분해 할당)   : 객체의 구조를 분해해 버린다는 말

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

const person = {
	name: '폼폼코',
	age: '21'
}
const { name, age } = person;
 console.log("name",name);
 console.log("age",age);
 ----------결과값---------------
 name 폼폼코
 age 21

const로 할당된 Person이라는 객체를 다시 분해해 각각 Key  값을 분해해서 다시 할당한 모습

---

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

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

console.log("첫째",val1):
console.log("둘째",val2):
console.log("셋째",val3):
-----------------결과값------------
첫째 1
둘째 2
셋째 3

위의 배열도 각자 val1,2,3, 로 분해해 재할당한 모습이다 

 

---

5.  전개 연산자 (Spread Operator)...

요약 온점 3개(...) 요약하자면 구조를 깨고 나올 수 있게 하는 것

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

console.log("name",name)
console.log("rest",rest)
---------결과값-----------
name Tom
rest [10,`Seoul`]

 

구조 분해 할당과는 조금 다른 결과이다, name 은 Tom이랑 Mapping이 되었고 

rest는 [10과 `Seoul]을가진 배열이 되었다

---

6.  화살표 함수 => ( Arrow Functions ) 

기본적인 함수 선언 : function 함수이름 (매개변수) {내용return}

화살표 함수 선언시 : 함수이름 = (매개변수) => {내용return}

TIP :

매개 변수가 1개일 경우 () 소괄호 생략가능

return이 한 줄이면 {} 중괄호 생략가능

EX )  const mysum4 = x => x+y:

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};
}
const mysum5 = function(x, y) {
  return {x: x, y: y};
};
function mysum6(x, y) {
  return {x: x, y: y};
}