React에 사용되는 ES6 문법

Heidi·2022년 5월 24일

React

목록 보기

6/8

Object Shorthand Assignment

<script>

  let name = "heidi"
  let age = 17

  let person = {
    name : name,
    age : age
  }

  console.log(person)
  
  // { name: 'heidi', age: 17 }

</script>

객체에서 key와 value가 동일한 경우 한번만 입력할 수 있다
그 외에는 불가하다

<script>

  let name = "heidi"
  let age = 17

  let person = {
    name,
    age
  }

  console.log(person)
  
  // { name: 'heidi', age: 17 }

</script>

똑같은 결과가 나오는 것을 확인할 수 있다.

Destructuring 구조분해 할당

객체에서의 활용

객체의 데이터를 활용할 때 기존에는 아래와 같이 작업하였다.

<script>

  let person = {
    name : "heidi",
    age : 20
  }

  let name = person.name
  let age = person.age
  console.log(name, age)
  
  // heidi 20

</script>

그러나 조금 더 간결하게 아래와 같이 작업할 수 있다.

<script>

  let person = {
    name : "heidi",
    age : 20
  }

  let { name, age } = person
  console.log(name, age)

  // heidi 20

</script>

배열에서의 활용

이 문법은 배열에서도 적용 가능하다
추후 state에서 활용되는 문법이다.

<script>

  let array = [1,2,3,4]

  let [a,b] = array

  console.log(a, b) // 1 2

</script>

let [a,b] = array에서 a와 b라는 변수가 자동생성되어 배열의 앞부분부터 순서대로 대입된다.

<script>

  let array = [1,2,3,4]

  let [a,b, ...rest] = array

  console.log(rest) // [ 3, 4 ]

</script>

let [a,b, ...rest] = array에서는 a와 b를 제외한 나머지를 복사하여 배열이 생성된다.

Spread

객체에서의 활용

객체를 통째로 복사하는 방법도 있다.

<script>

  let person = {
    name : 'heidi',
    age : 12
  }

  let person2 = {...person}

  console.log(person2) //{ name: 'heidi', age: 12 }
  
</script>

그렇다면 person3 = person 을 하게되면 똑같은 값이 나올텐데
굳이 위와 같이 복사하는 이유는 무엇일까?

<script>

  let person = {
    name : 'heidi',
    age : 12
  }

  let person2 = {...person}
  let person3 = person

  console.log(person2)  //{ name: 'heidi', age: 12 }
  console.log(person3)  //{ name: 'heidi', age: 12 }
 
</script>

복사방식은 조금 다르다.

person3는 person은 주소값을 가져오는 것이다.(즉, 객체는 하나이고 그 객체를 참고자는 변수가 두개인 것!)
person2는 객체가 아예 복사되는 것이다. (즉, 객체가 두개가 된다는 의미. 값이 같더라도 아예 다른 객체임!)

당연히
person === person3 // true
person !== person2 // false

...state로 활용되는 구문이니 잘 이해야 한다.

배열에서의 활용

<script>

  let a = [1, 2]
  let b = [...a, 3]
  let c = [...a, ...b]
  

  console.log(b) // [ 1, 2, 3 ]
  console.log(c) // [ 1, 2, 1, 2, 3 ]
 
</script>