[React/리액트] 리액트에서 불변성에 대해 이해하기

1. 불변성

 : 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다.

   이를 이해하기 위해선 자바스크립트의 원시형과 참조형에 대해 알아보아야 한다.

• 원시형 (Boolean, Number, String, null, undefined, Symbol)  : 불변성을 유지하는 타입
• 객체형 (Object) : 변경이 가능한 타입으로 불변성을 갖지 못하는 타입

 

 

[1] 원시형 예시

아래의 예시는 메모리 영역을 2개 사용한 것으로,

값이 바뀐 것이 아니라 변수 a는 처음에 할당을 하고나서, 다른 메모리에 재할당을 한 것이다. 

= 즉, 메모리에 재할당을 하였지 불변성을 유지하는 특징이 있다.

let a = '나는 원시형이다';

a = '사실 원시형이 아니야';

 

[2] 객체형 예시

메모리 영역은 그대로 이지만, 그 메모리 영역 안의 값을 변경한 것이어서 불변성을 갖지 못한 특징을 볼 수 있다.

let food = {
   name : 'kimchi',
   taste : 'spicy'
}

let superFood = food;
food.name = 'cake'

console.log(superFood.name, food.name)	// 'cake' 'cake'

 

요약 : 불변성은 메모리 영역에서 값을 변경할 수 없다는 의미이다.

 

2. 리액트안에서 불변성의 의미

 : React에서 불변성을 지키는 이유는 상태 업데이트를 하는 원리 때문이다. 리액트에서 상태값을 업데이트 할 때 얕은 비교를 수행하는데

    객체의 속성 하나하나를 비교하는 것이 아니라 참조값만 비교하여 상태 변화를 감지한다.

  따라서 Object나 Array의 속성이나 값을 바꾸는 불변성을 갖지 못하는 변경은 우리가 불변성을 지키는 업데이트가 필요하다

 

=> 그래서 배열이나 객체를 새로 생성하여 새로운 참조값을 만들어서 상태 업데이트를 해줘야 한다.

 

3. 불변성을 갖게 하는 방법

위에서 말했다시피, 배열이나 객체는 불변성을 갖지않는 특성 때문에 여러가지 메소드를 활용해 새로운 객체나 배열을 만들어 반환하여 활용하면 된다.

=> spread operator, map, filter 등 다양한 메소드를 사용해 새로운 변수를 선언하여 담아내어 반환하자