[React] 불변성(Immutability)

불변성: 변하지 아니하는 성질

리액트를 얕은 비교를 수행하기 때문에 객체 속에 있는 데이터를 하나하나 다 비교하지 않는다. 다만 값의 참조값만 비교할 뿐니다.

 

 

 

예시를 통해 알아보자.

아래와 같이 person이라는 객체가 있다고 하자.

const person = {
    name: 'John',
    age: 32,
    address: 'Seoul'
};

person의 age를 변경하고 싶을 때 왜 아래 1번이 아닌 2번을 이용해서 굳이 state를 변경해줘야 하는 것일까?

1) person.age = 42;
2) setPerson({...person, age: 42});

1번과 같이 진행한다면 화면 상에서 값의 변화가 일어나지 않을 것이고, 2번과 같이 진행한다면 예상대로 화면 상에서 값의 변화가 보일 것이다. 그 이유는 리액트에서 상태변화가 감지가 되려면 새로운 참조 값이 만들어져야 state에 변경이 일어났다고 인지하기 때문이다.

1번과 같이 객체 내부의 값만 변경해서는 값에 변경이 있다고 인지하지 못한다. 반드시 새로운 객체를 만들어 새로운 참조값이 만들어지게 한 다음에 그 값 전체를 state에 업데이트 해줘야한다. 그래야만 참조값 변경으로 인해 값에 변경이 일어났다고 인지할 수 있게 된다.

 

이렇게 리액트는 값의 불변성을 이용하여 값의 상태 변화를 감지할 수 있다.

덕분에 객체 내부의 값 비교에 사용되는 리소스 등이 사용되지 않고 참조 주소 값만 비교하기 때문에 빠르고 효율적으로 값의 변경을 인지할 수 있다.