다시 한 번 정리해보는 spread 연산자
Run JS로 쉬운 예제를 만들어보면서 spread 연산자의 개념을 조금 더 확장시켜봤다.
새로운 값을 추가적으로 넣는 것만으로 이해했던 spread 연산자의 기본속성은 배열 복사부터 시작된다.
조금 더 설명하자면,
6번, key가 동일한 object를 병합한다면 제일 뒤에 병합하는 value가 앞의 value 들을 덮는다.
7번, React는 업데이트라는 개념을 가지고 있어 기존의 값을 가져온 다음에 바뀔 부분을 고치고 업데이트를 진행한다.
배열안에 담긴 각각의 product 중, 하나의 product만 뽑아 그 내용을 바꾸고 싶을 때 이러한 속성을 알고 있으면 유용하게 쓰일 수 있다
...의 유무로 달라지는 형식
내가 작성했던 코드를 기준으로 이해해보고자 한다
배열안에 객체 추가
const addProduct = (product: Entity.Product) => {
setAddedProductList([...addedProductList, product]);
};addedProductList라는 빈 배열에 product 라는 객체가 들어온다.
product = { id :1, name : 'product 1'...}그래서 product를 추가할 때 마다 addedProductList의 형태는 [{}, {}, {}...]가 된다.
만약
setAddedProductList([...addedProductList, ...product]);라고 작성한다면?
Type 'Product' is not an array type 라는 에러메세지가 뜰 것이다
기존의 객체 안에 key, value 추가
반면에
const queryObject = stringToQuery(location.search);
const newObj = {
sort_type: SORTING_CATEGORY[categoryActiveTab],
star: STAR[starActiveTab],
};
const queryId = queryToString({ ...queryObject, ...newObj });queryObject는 key 와 value를 가진 객체이고 newObj 또한 마찬가지이다. queryObject 라는 객체안에 newObj의 key와 value를 추가시키고 싶을 때, ...를 사용하여 추가하면 된다.
그리고 6,7 번의 개념으로,
같은 key값이 들어오면 마지막으로 업데이트 된 값이 그 전의 값의 value를 덮으므로 key값은 유지한 채 계속 새로운 sort_type과 star의 value들을 보내줄 수 있는 것이다.
queryObject = { id : 1, name : '강남'...}
newObj = {sort_type : 1, star : 2...}
queryId = { id : 1, name : '강남'..., sort_type : 1, star : 2...}queryObject의 마지막 key와 value값 뒤에 추가되는 것을 볼 수 있다.
spread 연산자는 객체와 배열 모두에서 활용 가능하니 두 개의 차이점을 정확히 알고 활용하기!
