[React][JavaScript] React에서 불변성 관리를 하는 이유

1. 개요

참조타입을 복사할 때는 불변성을 지켜주며 복사를 하자.

2. 불변성 관리의 이유

리액트의 상태 업데이트와 관련이 있다.

리액트는 상태 업데이트를 통해 렌더링을 하게 되는데, 리얼돔과 버추얼돔을 비교하며 참조값이 바뀐 내용이 있다면 버추얼돔의 내용을 리얼돔에 반영하는 과정에서 리렌더링이 일어나게 된다.

 

리액트의 렌더링 과정은

1. 렌더 페이즈 - 버추얼돔과 리얼돔을 비교하는 단계

2. 커밋 페이즈 - 변경된 컴포넌트를 리얼돔에 적용하고 리렌더링을 하는 단계

로 이루어지는데 리액트는 버추얼돔과 리얼돔을 비교할 때 얕은 비교를 하게 되고 이 과정에서 참조값만을 비교하게 된다.

 

객체타입은 참조타입이라고 하는 만큼 얕은 복사시 참조값이 변경이 되기 때문에 불변성을 지키지 않는다면 원치 않는 리렌더링이 발생할 수 있다.

정상적인 리렌더링이라면 상관이 없겠지만 리렌더링을 하지 않아도 되는 컴포넌트가 리렌더링이 될 수도 있다. 비용의 낭비가 될 것이다.

또한 사이드이펙트의 방지를 위함인데, 데이터를 원본을 만들어 두고 사본을 사용한다면 예기치 못한 오류나 동작을 방지 할 수 있다.

3. 원시타입과 참조타입의 불변성

- 원시타입

알다시피 원시타입은 복사를 할 경우 불변성을 지키며 복사하게 된다.

let num = 1;
num = 1000;

원시타입중 하나인 숫자열을 예로 들었다.

변수 num에 1을 할당하고 다시 변수 num에 1000을 할당했다.

이 경우 메모리 상에서는 원본인num=1과 복사본인num=1000은 다른 주소를 가지며 저장이 된다. 불변성을 지키며 복사가 된 것이다. 

let originNum = 10
let dupNum = originNum
originNum = 20

console.log(originNum, dupNum)
//기대값 20, 10

좀 더 직관적으로 원시타입의 불변성을 알아본다면.

원본인 originNum=10 address01이라는 주소에 저장되었다고 생각하자.

originNum을 dupNum에 할당하고 originNum의 값은 20으로 변경해주었다. 이 때 변경된 originNum=20은 address02라는 주소에 저장이 된다.

서로 다른 참조값을 가지게 되었고 console.log을 실행해본다면 dupNum은 변경전의 참조값을 가진 originNum이 할당되고, originNum은 새로운 참조값이 생성되었다.

이로서 불변성이 지켜지며 복사가 되었다.

 

- 참조타입

• 배열

let arr = [1, 2, 3, 4] //address01에 저장
arr.push(5) //address01에 저장. 기대값 [1, 2, 3, 4, 5]
arr = [1, 2, 3, 4] ////address02에 저장 (새로운 참조값)

배열의 경우에는 여러 메소드가 있지만 불변성을 지키는 메소드와 지키지 않는 메소드가 있다.

위 push의 경우는 원본은 변경한 값을 리턴하므로 불변성을 지키지 않게 된다.

arr = [1, 2, 3, 4] 처럼 변수에 새로운 배열을 할당해야만 새로운 참조값을 만들게 되고 불변성을 지키게 된다.

• 객체

let person = { 
    name : "pjm",
    age : "36",
}
let newPerson = person
newPerson.name = "psy"
console.log(person.name)
//기대값 "psy"
console.log(newPerson.name)
//기대값 "psy"

원본객체인 person을 만들고 newPerson에는 원본객체를 저장했다.

사본객체의 newPerson.name의 값을 psy로 바꿔주었다.

person.name과 newPerson.name을 각각 concole에 출력해 보았고 원본과 사본이 동일한 값으로 변경이 되었다.

불변성이 지켜지지 않은 것이다.