[JavaScript] 불변성을 유지하며 배열 특정 인덱스 요소 변경하기

[JavaScript] 불변성을 유지하며 배열 특정 인덱스 요소 변경하기

React, JavaScript 할 것 없이 원본을 유지하는 불변성은 중요한 개념입니다.
React에서 배열 불변성 유지하여 변경하기 편한 벙법을 알아보겠습니다.

아래 배열이 있고 2번째 인덱스의 값인 3을 6으로 변경해보도록 하겠습니다.
다시 말하지만 3을 찾아 변경하는 것이 아닌 2번째 인덱스의 값을 변경하는 것입니다.

const origin = [1, 2, 3, 4, 5];

기존 원본 배열 유지하는 방법

const origin = [1, 2, 3, 4, 5];

// map 사용하기
const copied1 = origin.map((el, index) => index === 2 ? 6 : el);

// ... 문법 사용하기
const copied2 = [...origin];
copied2[2] = 6;

// slice 사용하기
const copied3 = origin.slice();
copied3[2] = 6;

console.log("origin : ", origin);
console.log("copied1 : ", copied1);
console.log("copied2 : ", copied2);
console.log("copied3 : ", copied3);

모두 정상적으로 출력이 되었습니다.

최신 JavaScript 문법 with 사용하기

with를 사용하면 간단하게 구현이 가능합니다.

const origin = [1, 2, 3, 4, 5];
const copied = origin.with(2, 6);
// origin.with(index 번호, 값)

console.log("origin : ", origin);
console.log("copied : ", copied);

 

React에서 with를 사용하면 위처럼 배열 불변성을 손쉽게 할 수 있습니다.