[JavaScript] concat과 spread 연산자

• 리액트에선 배열의 요소를 추가할 때 push메소드를 쓰면 배열의 변화를 감지하지 못한다.
• 이를 위한 해결책으로 concat과 spread opreator가 있다.

Concat()

• 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용한다.
• concat은 메서드이기 때문에 원본 배열을 변경하지 않고 새로운 배열을 반환한다.

concat 예시

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// concat 메서드를 사용하여 두 배열 결합
const resultConcat = array1.concat(array2);

console.log(resultConcat); // [1, 2, 3, 4, 5, 6]
console.log(array1); // 원본 배열1은 변경되지 않음
console.log(array2); // 원본 배열2은 변경되지 않음

...Spread 연산자

• Spread 연산자는 React에서 불변성(immutable)을 지키는데 자주 사용된다.
• Spread를 통해 객체를 업데이트하면 상태 변화를 감지할 수 있고 원본의 불변성을 유지시킬수 있다.

spread 배열 예시

// 배열 생성
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 두 배열을 결합
const resultArray = [...arr1, ...arr2];

console.log(resultArray);  // [1, 2, 3, 4, 5, 6]

spread 객체 예시

// 객체 생성
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// 두 객체를 결합
const resultObject = { ...obj1, ...obj2 };

console.log(resultObject);  // { a: 1, b: 2, c: 3, d: 4 }

spread 함수 예시

// 함수 정의
const sum = (a, b, c) => a + b + c;

// 배열을 전달하여 함수 호출
const numbers = [1, 2, 3];
const result = sum(...numbers);

console.log(result);  // 6

이렇게 원본객체를 건드리지 않고 객체 혹은 배열을 다루는 concat 과 spread에 대해 알아보았다. React에서 많이 쓰이는 문법이니 꼭 알아두도록 하자!

출처

• https://learnjs.vlpt.us/useful/07-spread-and-rest.html (벨로퍼트와 함께하는 모던 리액트)
• https://ko.javascript.info/array-methods (모던 자바스크립트 튜토리얼)