리액트에서 불변성을 유지하기 위해 배열의 메서드 반환값 확인
array.prototype.concat
- 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다.
- 기존배열을 변경하지 않는다.
- 추가된 새로운 배열을 반환한다.
array.prototype.filter
주어진 배열에서 조건에 부합하는 요소를 모아 새로운 배열로 반환한다. 어떤 요소도 조건에 부합하지 않으면 빈 배열을 반환한다.
array.prototype.map
배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하다.
array.from
배열을 얕게 복사해 새로운 배열 객체를 만든다.
array.prototype.slice
얕은 복사로 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.
array.prototype.sort
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 원본 배열을 정렬한다. 복사본이 만들어지지 않는다.
array.prototype.fill
배열의 모든 요소를 정적인 값으로 채운다. 원본 배열을 채워넣기 때문에 복사본이 만들어지지 않는다.
array.prototype.forEach
배열의 모든 요소에 대해 실행하고 반환값은 undefined이다.
array.prototype.reduce
누적된 결과값을 반환한다.
array.prototype.pop
배열의 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열을 제거하기 때문에 주의해야한다.
array.prototype.shift
배열의 첫 번째 요소를 제거하고 제거된 요소를 반환한다. 원본 배열을 제거하기 때문에 주의해야한다.
array.prototype.push
원본 배열에 요소를 추가하고 배열의 새로운 길이를 반환한다.
array.prototype.unshift
원본 배열의 첫 번째 요소에 추가하고 배열의 새로운 길이를 반환한다.
array.prototype.splice
배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 원본 배열의 내용을 변경한다.
객체 복사 방법
- 리액트에서 불변성을 유지하면서 업데이트하기 위해 객체의 복사 방법을 확인해보자.
object.assign() 및 spread로 얕은 복사
JSON.parse(JSON.stringify(obj))로 깊은 복사
- JSON.stringify는 자바스크립트 객체를 JSON문자열로 변환 후 JSON.parse는 JSON문자열을 자바스크립트 객체로 변환하여 객체에 대한 참조가 없어진다.
- JSON.stringify 메소드가 function을 undefined로 처리하는 문제가 있다.
spread 사용하여 복사
- 깊은 복사가 안된다는 점을 주의하자.
const original = {
a: 1,
b: 2,
c: {
d: 3,
},
}
const copied = { ...original }
original.a = 1000
original.c.d = 3000
console.log(copied.a) // 1
console.log(copied.c.d) // 3000잘못된 객체 복사 방법
object.create
- 프로토타입 복사할 때 사용한다. 객체 복사는 아니다.
const original = {
a: 1,
b: 2,
c: {
d: 3
}
};
const copied = Object.create(original);
original.a = 1000;
original.c.d = 3000;
console.log(copied.a); // 1000
console.log(copied.c.d); // 3000