[React] 얕은 복사와 불변성

개인 프로젝트에서 드래그 앤 드랍 기능을 구현 중이었는데, 의문이 들었다.

배열의 순서를 변경하는 과정에서, 왜 Array.from()을 이용해서 얕은 복사를 할까?

결론부터 말하면 참조값이 변경되어야 React가 상태 변경을 감지할 수 있기 때문이다.

그리고 불변성의 원칙을 지키기 위함이다.

그럼 하나씩 더 자세히 살펴보자.

얕은 복사를 해서 새로운 배열 인스턴스를 생성하면, 배열 자체는 새로운 참조가 되지만, 배열 내부 객체들은 여전히 원본과 같은 객체를 참조한다.

하지만 이렇게 최상위 레벨에서는 새로운 참조값이 생성되지만, 내부 객체는 여전히 원본과 동일한 참조를 공유한다.

드래그 앤 드롭 로직같은 경우엔 항목의 순서만 변경하고 항목 자체의 내용은 수정하지 않기 때문에 원본과 같은 객체를 참조해도 상관이 없다.

그리고 React의 상태 변화 감지 메커니즘은 다음과 같다.

1. 참조 동등성 비교

- React는 '===' 연산자를 이용해 상태를 비교한다. 이는 내용과 참조값을 둘 다 비교하므로 객체나 배열의 경우 내용이 같아도 참조가 다르면 다른 값으로 간주된다.

'===' 연산자는 일치 연산자로, 값과 타입(참조값) 모두 일치해야 true 반환
'==' 연산자는 동등 연산자로, 타입이 다르면 자동으로 변환 후 값이 일치하면 true 반환

2. 얕은 비교

- React의 setState와 같은 함수는 새로운 참조값이 제공될 때만 변화를 감지한다. 즉, 같은 참조값이라면 내용이 변경되어도 변화가 없다고 간주한다.

따라서 React의 상태 변경 감지 기준이 참조값의 변경인 것이다.

현재 상황에선 React가 상태 변화를 감지하고, 그에 맞게 리렌더링이 되어야 하기 때문에 얕은 복사를 사용한 것이다.

또 다른 이유로는 불변성 원칙이다.

불변성이란?

불변성이란 생성된 후에 상태가 변경되지 않는 성질을 의미한다.

프로그래밍에서 불변성은 특히 객체나 데이터 구조가 한번 생성된 후에는 그 내용이 절대 변경되지 않아야 한다는 원칙을 말한다.

자바스크립트에서 원시 타입은 이미 불변이다. (string, number, bigint, boolean, undefined, symbol)

객체, 배열을 포함한 나머지는 모두 가변이다.

그리고 재할당같은 경우엔 값이 변하는 것처럼 보이지만 실제로는 다른 메모리의 주소(참조값)을 가리키게 되는 것이다.

불변성을 지켜야 하는 이유?

1. 예측 가능성

- 데이터가 언제, 어떻게 변하는지 추적하기 용이하다.

2. 안정성

- 의도치 않은 부수효과를 방지할 수 있다.

3. 변경 감지 최적화

- 참조 비교만으로 변경 여부를 확인 가능하다.

4. 시간 여행 디버깅

- 이전 상태를 보존하여 디버깅에 용이하다.

5. 동시성

- 원본 데이터 보존으로 동시 작업 안정성을 확보할 수 있다.