이전에 array/object 복사를 할때 원본 보존 복사를 하면서 ...문법을 사용해서 copy본을 만들어서 복사한다~~ 라는 내용을 정리해놓은 적이 있다. 그리고 오늘 공부하면서 ...문법의 이름과 이전에 배웠던걸 좀 더 응용, 활용할 수 있는 방법을 배워 기록한다.
스프레드 연산자
...문법의 이름이 스프레드 연산자이다. 객체를 스프레드 연산자로 복사하면 낱개로 풀어줄 수 있다.
const [person, setPerson] = useState({
name : '화랑',
age : '24',
friend : {
name : '랑화',
age : '242',
},
});이와 같이 중첩 객체로 저장된 state에서 객체를 복사하여 friend의 name혹은 age를 바꾸고 싶을때 스프레드 연산자를 활용하여 해결할 수 있다.
1. 내가 한 방법
setPerson((prev) => {
let copy = {...prev};
copy.friend.name = newName //newName 이란 변수로 이름 입력을 받음
return copy
})2. 배운 방법
setPerson((prev) => ({
...prev,
friend : {...person.friend, name : newName}
}));2번 방법이 직관적이고 보기 좋아보임.
👍(배운점)👍
1. ...문법의 이름을 모른채로 넘겼었는데 그게 스프레드 연산자라는 것을 배움.
2. array를 복사할때 let copy = [...state] 이렇게 하는걸로 알고 있어서 object 복사할때도 [...state] 라고 했는데 오류가 떠서 알고 보니 object는 {...state} 이렇게 중관호를 써야 한다는 걸 배움.
3. 중첩 객체에서는 스프레드 연산자를 한번 더 사용하여 낱개로 풀어서 수정해야 한다는 사실을 알게 되었다.
