리액트에서 많이 쓰는 JS ES6 문법 정리

정말 자주 쓰이는 것을 정리해보자.

1. OSA(Object shorthand assignment)

let name = "hyun"
let age = 31
let person {
	name: name  =>여기서 name: name을 써도 되지만!
    age         =>여기 처럼 키, 벨류가 같다면 벨류 값을 생략해도 된다!
}

cosnole.log(person)

2. Destructuring
   이 문법은 값 가져올때 많이 쓰임 useState쓸때 많이 썼던 기억이남

let person = {
	name: "hyun"
    age: 31
}
// let name = person.name     => 이렇게 길게 써두 되지만!
// let age = person['age']

let {name, age} = person      => 이렇게 간편히 쓸 수 있다.
console.log(name, age)

배열에서도 사용 가능
let array = [1, 2, 3, 4]
let [a, b] array
console.log(a, b)
< 콘솔에 1, 2가 나온다.

*여기서 let [a, b, ...reset] array => 라고 하면 ...reset파라미터 문법인데
1, 2를 제외하고 값이 나온다
< 콘솔에 [3, 4]만 나온다

3. Spread 문법
   내가 리액트 배울때 제일 해깔려했던 문법이다. 정리 시작!

let person = {name: "hyun", age: 31}
let person2 = {...person}. => 객체의 깊은 복사다!
let person3 = person

console.log(person2)
console.log(person3)
이렇게 콘솔을 찍으면 답은 같다 하지만 복사 방법이 다르다!

person과 person2에 있는 객체는 완전히 다른것이다!
...person은 실제로 객체를 하나 더 생성하는 것이기때문이다.

person3는 객체의 주소값만 복사하는것이다.
(즉, 객체는 하나이고 그 객체를 참조하는 변수가 두개라는 뜻)

let person2 = {...person, address: "incheon"}
라고하면 콘솔에
{name: "hyun", age: 31, address: "incheon"}이라고 나온다
이처럼 추가 하기도 가능하다.

배열도 가능하다
let a = [1, 2]
let b = [...a, 3]
console.log(b)
< [1, 2, 3]
이라고 나온다

한마디로 새롭게 복사가 된다.

4. 삼항연산자

let person = null
person ? person.name : "there is no person"
< "there is no person"

삼항연산자는 간단하다
조건 ? true : false
에 맞게 넣어주면 된다.

이상 리액트에서 많이 쓰이는 JS문법을 정리해봤습니다.