[React] React에서 자주 사용하는 ES6 문법

React 개발을 하기 위해서 꼭 필요한 JS 문법 중 ES6 문법에 대해 알아보자.

📕 Javascript ES6 문법

1.상수와 변수

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

const a = 1;
let b = 3;

a = 3; // 상수는 한 번 선언한 값을 다시 할당할 수 없다.
b = 2; // 변수는 값을 재할당 가능

console.log("a :", a); // Error
console.log("b :", b); // b : 2

• var는 그냥 쓰지마쓰지마...!!
  : Block level scope를 따르지 않기 때문에 종종 다른 언어와 오해가 발생한다.

if (1 === 1) {
  // 항상 이 안으로 들어온다
  var c = 3;
  console.log("c :", c); // c : 3
}
console.log("바깥 c :", c); // 바깥 c : 3 

// var는 block level scope를 가지지 않는다. = {} 밖에서도 값이 그대로 선언된다.

2. Object, 객체 복사

✔️ Javascript에서 말하는 object
: key-value pair

1) 객체 선언

: {중괄호} 안에 key-value pair 형태로 선언

const testObj = {
  name: "hyunjin",
  age: "25",
  company: "none",
  doSomething: () => {}, //value에는 함수도 들어갈 수 있다.
};

2) 단축 속성

: key-value가 일치하면, 하나로 생략 가능!!

const name = "hyunjin";
const age = 27;

const testObj = {
  name, // key 와 상수이름이 같으면, name : name으로 쓸 수 있고, name 하나로만 작성 가능!
  age,
  company: "none",
  doSomething: () => {}, //value에는 함수도 들어갈 수 있다.
};

3) 🚨복사 주의🚨 얕은 복사!

const obj1 = {
  value1: 10,
};

const obj2 = obj1; // 얕은 복사

console.log("obj1", obj1); // {value : 10}
console.log("obj2", obj2); // {value : 10}

🧐 근데 만약 내가 obj2를 바꾼다면?

• 예상 : obj2만 바뀐다
• 실제 : obj1 도 같이 바뀜..! 띠용...!

const obj1 = {
  value1: 10,
};

const obj2 = obj1; // 1번째 방법(얕은 복사)
const obj3 = JSON.parse(JSON.stringify(obj1)); // obj1을 문자열 형태로 쫙 풀어버렸다가 다시 묶는다.
// = 새로운 객체를 만든다. = 다른 주소값을 생성해버린다 = 새로운 주소값을 반환한다.

obj1.value1 += 1;

console.log("obj1", obj1); //obj1 { value1: 11 }
console.log("obj2", obj2); //obj2 { value1: 11 }
console.log("obj3", obj3); //obj2 { value1: 10 } // 얘는 값이 obj1 값을 그대로 지켜준다!

📌 JSON.parse() / JSON.stringify()

• JSON.parse() : JSON의 형태가 아닌걸 넣으면 JSON 형태로 다시 묶어줌!!
• JSON.stringify() : JSON 형태를 문자열로 쫙 풀어버림..!

주로 객체의 key-value의 값은 "주소값"으로 data가 저장이 되므로, obj2의 value 값을 바꾸고 싶어도 얕은 복사로 인해 obj1의 값이 함께 바뀌게 된다.
이를 방지하기 위해 obj3와 같은 방법으로 value 값만 수정할 수 있다.

3. Template Literals (벡틱 사용)

: 여러줄 작성이 가능하다. Multi-line 지원이 된다!

1) 일반 텍스트

`안녕하세요`

2) 멀티라인 가능

`안녕하세요
제 이름은 홍길동입니다.
나이는 30살 입니다. `

3) place holder를 이용한 표현식

: ${ 변수명 } 중괄호 안에 변수명을 넣어줄 수 있다!!
→ javascript 과제를 진행할 때, 주로 사용했던 값을 입력해주는 방식이었다.

const testValue = 3;

console.log(`문자열 ${testValue} 입니다.`);  // 문자열 3 입니다.
// placeholder를 이용하여 변수명을 넣어 원하는 값을 넣을 수 있다.

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

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

• De(out, 반대) + Structur + ing : 구조를 분해해서 반대로 한다. = 배열의 구조, 객체의 구조를 뜯어버린다!!

1) 객체의 구조분해할당

: key 값을 이용하여, 각각의 value에 접근한다.
++ ${} : placeholder 방식도 자주 사용한다.

const person = {
  name: "홍길동",
  age: 30,
};

const { name, age, norFound } = person;

console.log("name", name); // name 홍길동
console.log("age", age); // age 30
console.log("norFound", norFound); // norFound undefined

2) 배열의 구조분해할당

: index를 활용하여 각각의 값들에 접근한다.

const testArr = [1, 2, 3, 4, 5];

const [one, two, three, four, five, six] = testArr;

console.log("one : ", one); // one : 1
console.log("two : ", two); // two : 2
console.log("three : ", three); // three : 3
console.log("four : ", four); // four : 4
console.log("five : ", five); // five : 5
console.log("six : ", six); // six : undefined

5. 전개 연산자 (Spread Operator)

• spread operator(...)
  : 배열 내 각 값들을 풀어 헤쳐서 하나하나에 접근하겠다.

let [name, ...rest] = ["hyunjin", 25, "seoul"];
console.log("name", name); // name hyunjin
console.log("rest", rest); // rest [ 25, 'seoul' ] // ...으로 풀어헤쳐서 나머지를 다 가져와

ex)

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

let steve = {
  ...tom,
  name: "Steve",
};

console.log(tom); //{ name: 'Tom', age: 10, region: 'Seoul' }
console.log(steve); //{ name: 'Steve', age: 10, region: 'Seoul' }

6. 화살표 함수(Arrow Function)

// 1. 기본 함수 형태
function mysum1(x, y) {
  return x + y;
}

// 2. 화살표 함수
const mysum2 = (x, y) => {
  return x + y;
};

//3. 이때 return문이 한 줄이면 중괄호 빼줘야함!!

const mysum3 = (x, y) => x + y;

console.log(mysum1(1, 2)); // 3
console.log(mysum2(1, 2)); // 3
console.log(mysum3(1, 2)); // 3

Javascript에서 배운 기본 문법 내용들이었지만, react에서도 자주 사용된다고 하니, 잘 익히고 익숙하게 만들도록 하자.