[기술 공유] React.js rest Props와 Object destructuring

JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter - A Practical Guide

분산 구문을 사용하면 객체를 불변의 방식으로 복제, 업데이트 및 병합할 수 있습니다. 불변성은 원래(소스) 객체에 대한 우발적이거나 의도하지 않은 변경을 줄이는 데 도움이 됩니다.

The Object Destructuring and Spread syntaxes are not the same thing in JavaScript.

?

A Simple Guide to Destructuring and ES6 Spread Operator

스프레드 연산자에는 둘 이상의 기능이 있습니다. 어떤 의미에서는 과부하 입니다. 또한 destructuring 과 결합하여 나머지 연산자 로 사용할 수도 있습니다 . ES6에서 스프레드 연산자는 배열에서만 작동했습니다. 그러나 4단계에 도달한 제안 에 따르면 개체에도 스프레드 연산자를 사용할 수 있습니다.

Spread with Objects

When working with objects, spread can be used to copy and update objects.

Originally, [Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) was used to copy an object:

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

The secondObject will now be a clone of the originalObject.

This is simplified with the spread syntax—you can shallow copy an object by spreading it into a new one:

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

This will result in the following:

Output
{enabled: true, darkMode: false}

Just like with arrays, this will only create a shallow copy, and nested objects will still be passed by reference.

Adding or modifying properties on an existing object in an immutable fashion is simplified with spread. In this example, the isLoggedIn property is added to the user object:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

THis will output the following:

Output
{id: 3, name: "Ron", isLoggedIn: true}

One important thing to note with updating objects via spread is that any nested object will have to be spread as well. For example, let’s say that in the user object there is a nested organization object:

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

If you tried to add a new item to organization, it would overwrite the existing fields:

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

This would result in the following:

Output
id: 3
name: "Ron"
organization: {position: "Director"}

If mutability is not an issue, the field could be updated directly:

user.organization.position = 'Director'

But since we are seeking an immutable solution, we can spread the inner object to retain the existing properties:

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

This will give the following:

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}