redux에서 불변성을 유지하며 데이터 추가 및 삭제 하는법

데이터 추가 기능

리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 하는데요. 불변성 유지를 해 주어야 나중에 리액트 컴포넌트의 성능을 최적화할 수 있기 때문에 push함수를 사용하지 않는걸 권장합니다.

1. Spread 연산자

ES6에 새로 추가된 문법으로 ...을 사용해서 배열의 값들을 받아오거나 확장시킬 수 있습니다. 배열이나 문자열과 같이 반복가능한 문자를 0개이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여 0개 이상의 키 값의 쌍으로 객체로 확장시킬 수 있습니다.

const arr = ['a', 'b', 'c']; 
const arr2 = [1, 2, 3]; 

console.log([...arr, ...arr2]); // ['a', 'b', 'c', 1, 2, 3]

2. Concat 함수

Concat 함수는 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어줍니다.

const array1 = [1, 2, 3]; 
const array2 = [4, 5, 6]; 
const array3 = array1.concat(array2); 

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

 

 

데이터 제거 기능

1. Filter 함수

불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용합니다. filter 함수를 사용하면 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류할 수 있습니다.

const nubers = [1, 2, 3, 4, 5, 6]; 
const biggerThanThree = numbers.filter(number => number > 3); 

console.log(biggerThanThree); // [4, 5, 6]

 

 

 

velog.io/@hurima90/React%EC%8A%A4%ED%84%B0%EB%94%94%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4%EC%9D%98-map-%ED%95%A8%EC%88%98