불변성의 개념과 불변성이 중요한 이유

중요 키워드

1. 불변성
2. 원시타입
3. 참조타입 

불변성이 중요한 이유

리액트에서 불변성이라는 개념은 굉장히 중요하다. 

렌더링과 밀접한 관계가 있기 때문이다.

 

리액트는 어떠한 state 가 있을 때 이 값이 변경됐는지 아니면 이전과 같은지에 따라서 렌더링을 할지 말지를 결정한다. 

이때, 변경됐는지 판단하는 값은 주소값을 의미한다. (얕은 비교 수행)

 

그렇기 때문에 불변성을 지키는 것이 중요하다고 할 수 있다.

 

불변성이란?

데이터 변경 시 기존에 생성된 원본 데이터를 변경시키지 않고, 새로운 원본을 만드는 것을 말한다.

데이터 타입에서 원시타입과 참조타입이 있을 때, 원시타입은 불변성 지키고, 참조타입은 불변성을 지키지 않는다고 할 수 있다.

 

원시타입과 참조타입

원시타입 : Boolean, String, Number, null, undefined, Symbol

의 경우 아래와 같이 변수 num을 1에서 2로 변경했다.

let num = 1; //예) 주소값 x998 

num = 2; //예) 주소값 x999
console.log(num) //2

 

이때, 원시타입은 1이라는 숫자가 2로 값이 변경되는 것이 아니라 num 이 가리키는 메모리주소의 값이 바뀌는 것이다. 

이 말은 1이 x998이라는 주소값을 가지고 있는데 num을 2로 변경하면 주소값 x998의 값을 변경하는 게 아니라 num 이 2가 있는 x999 주소값을 가리키게 되는 것이다.

1은 그대로 x998 메모리에 있고 2 가 x999 메모리에 추가된다.

기존에 있던 원본 1이 삭제되지 않고 유지되기 때문에 원시 타입은 불변성을 지킨다고 할 수 있다.

따라서 렌더링이 잘된다.

 

참조타입 : Object, Array

아래와 같이 배열에 blue라는 요소를 추가했다.

let color = ['red', 'green']; //예)주소값 x888
color.push('blue'); //예)주소값 x888 변경되지 않음

 

하지만 참조타입은 데이터를 추가하거나 삭제해도 주소값이 변경되는 것이 아니다.

주소값이 변경되지 않기 때문에 리액트가 렌더링 하지 않는다.

 

따라서 참조타입의 값을 변경할 때는 불변성을 지키면서 변경해야 한다.

 

불변성을 지키는 방법

1. spread operator, map, filter 등 새로운 배열을 반환하는 메서드를 활용하여 새로운 객체나 배열을 생성한 후 변경한다.
2. immer.js 불변성 지원 라이브러리를 사용한다.