React) 불변성

React Component의 불변성

---

불변성이란, 기존의 값을 수정하지 않는 것을 말합니다.

리액트 컴포넌트는 상태가 변하더라도 이 기존의 값을 수정하지 않고, (불변성을 지키면서) 새로운 값을 만들어내도록 해야 합니다. 

그래서 기존의 데이터에 변화가 필요할 떄 직접 그 데이터를 수정하지 않고, 해당 데이터를 복사 후 수정하여 새로운 객체로 만들어줍니다. 

 

• Example

다음 예시에서는 newArray에 array를 복사하여 새로운 객체를 할당한 것이 아니라 newArray로 array의 이름만 바꾼 것이라고 생각하시면 됩니다.

그래서 newArray의 요소에 직접 접근하여 수정을 한 것이 array에도 마찬가지로 반영이 되어 [0] 번 요소를 바꾼 뒤에도 array와 newArray가 같다는 결과가 나옵니다. 

반면에 `[...array]` 로 할당한 뒤 첫번째 요소를 수정하면 두 배열은 서로 다르다는 결과가 나옵니다.

즉, 이 방식으로는 array와 newArray2가 서로 다른 객체라는 것을 알 수 있습니다. 

이렇게 내용을 복사에서 할당해 주어야 불변성을 지킬 수 있습니다. 

• 전개 연산자 : ( ... )

위에서 배열 내의 내용을 복사하기 위해 사용한 (...) 은 전개 연산자 라고 합니다. 

이는 객체나 배열 내부의 값을 복사할 때 사용하는 것으로 Shallow copy를 하게 됩니다.

내부의 값을 완전히 똑같이 복사하는 것이 아니라 가장 바깥에 있는 값만 복사하는 것입니다. 

그래서 객체 내부의 객체나 배열은 복사되지 않기 때문에 많약 내부까지 복사하려는 경우 중첩된 값들은 또 따로 복사해 주어야 합니다. 

---

References

• 리액트를 다루는 기술 (김민준)