-
Notifications
You must be signed in to change notification settings - Fork 0
[기술 공유] 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단계에 도달한 제안 에 따르면 개체에도 스프레드 연산자를 사용할 수 있습니다.
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"}
😎@Daewon Seo 🥳@papa 🧐@Coa 🤪@HuiSeung LEE
Test 관련 이슈
Next.js 관련 이슈
Git 관련 이슈
기타 이슈
기술공유
- [strapi] authenticated request 구현하기
- aria label는 왜 쓰는 것인가?
- font icon을 집어 넣을 때 i 태그로 넣을까? pseudo elements(before, after)로 넣을까?
- Nextjs에서 a 태그를 Link 태그로 감싸야 한다.
- Nextjs에서 img 대신 Image 컴포넌트 사용하기, next.config.js는 무엇인가?
- React.FC
- React.js rest Props와 Object destructuring
- Reactjs 컴포넌트 선언 방식을 화살표 함수로 할지 함수 선언문으로 할지
- Test 참고
- useAxios test code
- 뷰포트 메타태그, Next.js에서 Head 태그란?
- 스타일이 중복되서 들어갈 때 그룹 셀렉터 대신 mix를 쓰거나, 아니면 만든 mix의 modifier를 만들어주거나, 각각에 주거나.
- 타입스크립트 클래스에서의 protected, private 필드와 # 필드의 차이
- Global state VS local state 리덕스의 배경이해, 글로벌 변수와 다를 바 없다면 지양되어야 하지 않나?
- Fontawesome Icon React 적용방법
- classnames/bind 함수와 classnames 함수의 차이
- Jest와 Testing Library