setList((prev) => [...prev, ...additionalItems]);
위와 같은 스프레드 연산자가 나열된 구조만 보면 머리가 하얘져서 남겨본다.
쉽게 생각하자.
스프레드 연산자는 배열, 또는 객체의 요소를 펼치거나 복사할 때 사용한다.
예시로 두개의 배열을 합쳐보자.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arrays = [...arr1, ...arr2];
console.log(arrays);
// [1, 2, 3, 4, 5, 6]
이번에는 복사해보자. 말하자면 똑같이 생긴 새로운 배열을 만드는 것이다.
const originalArr = [1, 2, 3];
const copiedArr = [...originalArr]; // 복사
console.log(copiedArr);
// [1, 2, 3]
이번에는 객체를 합쳐보자.
const obj1 = { name: 'A', age: 25 };
const obj2 = { job: 'Developer', city: 'Seoul' };
const result = { ...obj1, ...obj2 };
console.log(result);
// { name: 'A', age: 25, job: 'Developer', city: 'Seoul' }
굳이 객체 + 객체 형태가 아니어도, 내용을 직접 넣을 수도 있다.
const originalObj = { name: 'A', age: 25 };
const updatedObj = { ...originalObj, age: 30, city: 'Seoul' }; // 직접 추가
console.log(updatedObj);
// { name: 'A', age: 30, city: 'Seoul' }
또한 함수 호출 시, 배열의 각 요소를 함수의 개별 인자로 전달할 때 사용할 수 있다.
const numbers = [1, 2, 3];
function add(a, b, c) {
return a + b + c;
}
console.log(add(...numbers));
// 6
다시 맨 처음으로 돌아가서-
스프레드 연산자는 무한스크롤 구현할 때 반드시 필요한데, 침착하게 대응해보자.
const [list, setList] = useState<listItemProps[]>([])
// listItemProps에 지정한 타입형태의 요소로 이루어진 배열. 초기값은 빈 배열
setList((list) => [...list, ...additionalItems]);
// 기존 list에 additionalItems을 더한다.
prev는 상태값 list에 들어있던 배열, 또는 객체를 말한다.
말하자면 그냥 상태값을 넣어도 똑같은 식이 된다.
'개념 정리' 카테고리의 다른 글
| Typescript - 두가지 key 추적을 위한 Map 객체 활용 (0) | 2024.10.29 |
|---|---|
| javascript - 유사배열객체, Array.from( ) (0) | 2024.10.28 |
| javascript - reduce() (1) | 2024.10.28 |
| 새로운 리액트 프로젝트 생성하기 (0) | 2024.10.16 |
| HTTP와 HTTPS (0) | 2024.02.05 |