[React] 리액트에서 불변성

리액트에서 불변성을 지키는 것이 중요하다는 말을 많이 들어봤다. 리액트에서 불변성에 대해 이해하기 위해서 

• 불변성이 무엇인가
• 불변성이 지키는 것은 무엇인가
• 리액트에서 불변성이 중요한 이유

위와 같은 내용을 알아보자.

 

불변성이란?

불변성(immutability) 이란 네이버 국어사전에 의하면 '변하지 아니하는 성질' 을 의미한다.

그러면 프로그래밍 세계에서 불변성이란 데이터가 한 번 생성되면 변경되지 않는 성질을 말한다.

 

불변성을 지킨다의 의미

자바스크립트에서 객체와 배열은 참조 타입이다. 따라서 직접적으로 값을 수정할 경우 원본 데이터를 변경하는 현상이 일어난다. 원본 데이터를 변경시켜서 불변성을 지키지 않은 예시를 먼저 알아보자.

const fruits = ["apple", "banana"];
const newFruits = fruits;
newFruits.push("orange");

console.log(fruits);    // ["apple", "banana", "orange"]
console.log(newFruits); // ["apple", "banana", "orange"]

newFruits 변수에 fruits 배열을 할당하고 newFruits 에 새로운 과일을 넣어주면 어떻게 될까? 아마 아래와 같은 결과를 예상할 수도 있다.

• fruites 에는 ["apple", "banana"] 
• newFruites 에는 ["apple", "banana", "orange"]

하지만 결과는 두 배열 모두 ["apple", "banana", "orange"] 가 들어있다. 

 

원본 배열인 fruits 가 변경된 이유가 뭘까? 

 

그 이유는 fruites 와 newFruites 는 동일한 참조 값을 바라보고 있기 때문이다.

자바스크립트에서 변수에 값 자체를 저장하는 기본 데이터 타입과 달리 배열과 객체와 같은 참조 타입의 경우 변수에 메모리 주소가 할당된다. 따라서 주소를 통해 객체나 배열에 접근할 수 있다.

위의 예시에서도 newFruits 에 fruits 에 ["apple", "banana"] 배열을 가리키고 있는 참조 값이 들어있었고 newFruits 에 해당 참조 값을 할당해 준 것이여서 두 변수는 같은 배열을 바라보게 된것이다. 

 

그러면 원본 데이터를 변경시키지 않고 데이터를 변경시키려면 어떻게 해야하는가? 그 방법은 아래와 같다.

const fruits = ["apple", "banana"];
const newFruits = [...fruits, "orange"];

console.log(fruits);    // ["apple", "banana"]
console.log(newFruits); // ["apple", "banana", "orange"]

newFruits 에 스프레드 연산자를 통해 fruits 배열을 복사하고, "orange" 를 추가하여 새로운 배열 newFruits 를 생성하였다. 

이렇게 하면 결과는? fruits 는 원본 데이터가 유지되었고, 

 

리액트에서 불변성이 중요한 이유

리액트에서 불변성을 지키는 것은 왜 중요할까?

 

리액트는 상태(state) 가 변경할 때마다 리렌더링하는데, 상태가 변경되었다는 것은 판단하는 방식이 중요하다. 리액트는 이전 상태와 새로운 상태를 비교할 때 참조 비교 방식을 사용한다. 

만약에 불변성을 지키지 않은 예시처럼 배열을 직접 변경하면 리액트가 상태가 바뀌었음을 감지할 수 없다. 이전 상태와 새로운 상태가 같은 참조로 보기 때문이다. 

 

---