[JavaScript] 불변성 유지 (push, concat, 전개 연산자(spread operator) 비교해보기)

불변성 유지

이전까지 몰랐는데 리액트를 공부하면서 불변성에 대해서 알게되었다.

리액트에서 배열에 값을 추가할 때 배열의 불변성은 유지하면서 값을 추가해야한다. 

일반적으로 push, splice, unshift, pop 메서드들은 배열을 직접 수정하기 때문에 불변성을 유지하기 위해서는 사용하면 안된다.

그러므로 기존의 배열은 그대로 유지하지하면서 기존의 배열을 기반으로 데이터를 추가한 새로운 배열을 만들어서 값을 수정할 수 있는 메서드인 concat, slice, map, filter 와 같은 메서드들 또는 전개 연산자(spread operator) 사용하여 불변성을 유지하면서 값을 추가해야한다.

불변성을 유지해야지 리액트의 특성을 이용하여 모든 데이터들을 필요한 상황에 리렌더링 되도록 설계할 수 있고 나중에 성능 최적화도 할 수 있다.

push와 concat의 차이

ex1) push

보통 push는 배열에 새로운값을 추가할때 사용한다. 위 예제를 보면 arr배열에 숫자6을 추가해서 원본 데이터가 변경되어 반환되는것을 확인할 수 있다.

ex2) concat

concat 또한 push와 같이 배열에 값을 추가할 수 있다. 하지만 위 예제를 보면 원본데이터 arr의 출력값은 그대로이고 concat을 사용해 숫자6을 추가했을때 원본데이터의 수정이 아닌 새로운 배열객체를 만들어 값을 추가한다는 차이점을 확인할 수 있다.

react에서 push를 사용해서 값을 추가할수도있지만 추후에 성능개선을 하기 어렵게되고 수정하기 어려운 문제를 발생시킬 수 있으므로 concat을 통해 원본데이터 객체는 유지하면서 새로운 객체 값을 가지고 문제를 풀어 나가는것이 좋다.

요즘 많이 사용되는 전개 연산자(spread operator)를 보면

전개 연산자 (spread operator)

위 예제처럼  arr 원본 배열은 그대로 유지하면서 값을 복제하고 새롭게 데이터를 추가하여 반환하는 arr3 배열을 확인할 수 있다.

이처럼 전개 연산자를 사용하여 불변성을 유지할 수 도 있다.